问题

Question

最近我注意到，当您在菜单项上设置样式时：悬停，某些属性，如文本阴影，颜色，背景和还有许多其他应用于当前悬停的菜单项。

但是，似乎 padding 属性应用于所有菜单项，而不仅仅是悬停在其上的菜单项。

以下是一个示例：http://codepen.io/Bizzet/pen/LEvopq

.main-navigation a {
    display: block;
    text-decoration: none;
    color: #fff;
    font-size: 1.1em;
    transition: 1s;
    margin-bottom: -7px;
}

.main-navigation a:hover {
    margin-bottom: 0;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}

正如您在Codepen中看到的那样，文本阴影应用于单个菜单项，而填充应用于所有元素。

我该怎么做才能防止这种情况发生？

我只希望一个菜单项一次悬停。

Answer 1

填充不适用于所有菜单项。发生的事情是，通过悬停效果扩展了父容器的高度，并且由于其他菜单项是顶部对齐的，因此它们也会升高。

试试这个：

.main-navigation a:hover {
  ...
  margin-bottom: 0;
  margin-top: -7px;
}

<强> Demo

Answer 2

问题

您的ul li a最初的利润率为负。但是，当您将鼠标悬停在a上时，会将边距底部重置为0.这会导致框大小增大并向上推动整个导航栏。

的Insight

填充不会应用于所有列表项。导航框中的一个链接是向上推动整个导航栏，这样就可以将外观应用于所有列表项目。

演示

运行此代码段以进行演示。菜单项是黑色的。

＆＃13;

header {
  min-height: 10em;
  background: rgba(0, 0, 0, 0.25);
  position: relative;
}
h1 {
  text-align: center;
}
.container {
  background: green;
  list-style: none;
  position: absolute;
  padding: 0;
  margin: 0;
  bottom: 0;
}
.container:after {
  display: block;
  content: '';
  clear: both;
}
li {
  float: left;
  margin-right: 0.5em;
  display: inline-block;
  background: black;
  position: relative;
}
span {
  color: red;
  margin-bottom: -0.75em;
  display: block;
  transition: all 3s;
}
span:hover {
  margin-bottom: 0;
}

＆＃13;

<header>
  <h1>Title</h1>
  <ul class="container">
    <li class="item">
      <span>Hello</span>
    </li>
    <li class="item">
      <span>there</span>
    </li>
    <li class="item">
      <span>friend</span>
    </li>
  </ul>
</header>

＆＃13;

解决方案

应该注意的是，除非您想要元素重叠，否则通常不鼓励使用负边距。如果有必要，最好在1个父元素上设置负边距而不是每个孩子。

要一起解决这个特殊问题，只需替换它：

a:hover { margin: 0; }

用这个：

a:hover { transform: translateY(-70%); }

请注意，您可能需要在-browser-规则中添加transform前缀。 Browser support here

如何阻止所有菜单项添加样式：悬停？

2 个答案:

问题

的Insight

演示

解决方案