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

【问题标题】：Adding border on mouseover moves content在鼠标悬停上添加边框移动内容
【发布时间】：2015-02-18 01:53:40
【问题描述】：

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

<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

【问题讨论】：

你忘了问问题。边框有宽度，因此需要一些空间来绘制。

标签： jquery html css

【解决方案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 透明边框以进行置换，以防止元素在悬停时移动。

【讨论】：

它仍然会稍微向下移动文本位置（至少在我的 FF 35.0.1 上 Win）

【解决方案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，完整的演示将如下所示

.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;
}

<!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>

【讨论】：

我使用 JQuery 是因为我希望边框在点击时保持不变。认为我可以用 JQuery 而不是一半 CSS 和一半 JQuery 来完成这一切

【解决方案3】：

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

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

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

【讨论】：

您建议的更新示例：jsbin.com/muriyewuro/1/edit?html,css,js,output

【解决方案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');
        }
    });

【讨论】：