我想在鼠标悬停并单击时添加边框,但每当添加边框时它都会向下移动所有内容。
<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');
}
});
最佳答案
您可以添加 box-sizing: border-box
到元素,以便在元素的宽度/高度计算中包含 border
。在此之前,元素将占据超过 100%
的空间,因为 3 * 33% + 6px
!=
100 %
(由于每边的 3px
边框未包含在元素的尺寸计算中)。
.categoryb {
float: left;
width: 33.33%;
padding: 0;
text-align: center;
box-sizing: border-box;
border: 3px solid transparent;
}
您还可以在元素周围添加一个 3px
透明边框以防止元素在悬停时移动。
关于jquery - 在鼠标悬停时添加边框会移动内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28574657/