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边框，所以元素占用空间的余量超过.categoryb { float: left; width: 33.33%; padding: 0; text-align: center; box-sizing: border-box; border: 3px solid transparent; }。不包括在元素的维度计算中。）

Updated Example

3px

您还可以在元素周围添加{{1}}透明边框以进行移位，以防止元素在悬停时移动。

Answer 2

如果您使用的是lib并且不想要box-sizing，这是另一种解决方案。

更改

.selecteda {
  border: 3px solid black;
  margin: 0;
  padding: 0;
}

到

.selecteda {
  box-shadow: 0 0 0 3px black;
  margin: 0;
  padding: 0;
}

或

.selecteda {
  box-shadow: inset 0 0 0 3px black;
  margin: 0;
  padding: 0;
}

请注意，您不需要使用Jquery，只需使用:hover完整的演示将会是这样的

＆＃13;

.categoryb {
  float: left;
  width: 33.33%;
  padding: 0;
  text-align: center;
}
.sections {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.sidea {
  list-style-type: none;
}
a:hover {
  text-decoration: none;
}
a {
  text-decoration: none;
}
.categoryb:hover {
  box-shadow: 0 0 0 3px black;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <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>
  </body>
</html>

＆＃13;

Answer 3

将边距设置为-3px以为边框腾出空间，简单修复。

编辑：抱歉，您还必须显示溢出，或者您可以进行计算，使按钮的宽度占33％减去边框的三个像素。那或只是显示溢出。

http://jsbin.com/kofazaqozi/1/edit?html,css,js,output

Answer 4

添加到鼠标悬停：

$(this).css('width', 'calc(33.33% - 6px)');

并添加到mouseleave：

$(this).css('width', '33.33%');

要：

$('.categoryb').on({
        mouseover: function () {
            $(this).css('width', 'calc(33.33% - 6px)');
            $(this).addClass('selecteda');
        },
        mouseleave: function () {
            $(this).css('width', '33.33%');
            $(this).not('.selected1a').removeClass('selecteda');
        },
        click: function () {
            $('.categoryb').removeClass('selected1a').not(this).removeClass('selecteda');
            $(this).addClass('selected1a');
        }
    });

在鼠标悬停上添加边框会移动内容

4 个答案: