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

Question

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

<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

Answer 1

您可以添加 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 透明边框以防止元素在悬停时移动。