jquery - 在鼠标悬停时添加边框可移动内容

我想在鼠标上添加一个边框并单击，但每当添加边框时，它都会向下移动所有内容。

<div class="sections">
    <ul class="sidea">
        <li class="active categoryb"><a href="#">Featured</a>
        </li>
        <li class="categoryb"><a href="#">Most Popular</a>
        </li>
        <li class="categoryb"><a href="#">Recent</a>
        </li>
    </ul>
    <div class="clear"></div>
</div>

CSS

.categoryb {
  float: left;
  width: 33.33%;
  padding: 0;
  text-align: center;
}
.sections {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.selecteda {
  border: 3px solid black;
  margin: 0;
  padding: 0;
}

JQuery公司

$('.categoryb').on({
    mouseover: function () {
        $(this).addClass('selecteda');
    },
    mouseleave: function () {
        $(this).not('.selected1a').removeClass('selecteda');
    },
    click: function () {
        $('.categoryb').removeClass('selected1a').not(this).removeClass('selecteda');
        $(this).addClass('selected1a');
    }
});

实例：
http://jsbin.com/ravavazazo/1/edit?html,css,js,output

最佳答案

您可以将box-sizing: border-box添加到元素中，以便在元素的宽度/高度计算中包含border。在此之前，元素将占用超过100%的空间，因为3 * 33% + 6px!=100%（由于元素维度计算中未包含的每一侧的3px边界）。
Updated Example

.categoryb {
    float: left;
    width: 33.33%;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
    border: 3px solid transparent;
}

您还可以在元素周围添加一个3px透明边框以防止元素在悬停时移动。