CSS

Question

我有一个浮动在屏幕上的菜单，当鼠标悬停在其中一个元素上时，它会执行它必须执行的操作，其余部分的不透明度会发生变化，只有悬停的元素会被强调。但是当鼠标悬停在空白 space 上的元素之间时，中间的一小部分 space 会改变所有元素的不透明度。如果我将鼠标悬停在靠近其底部或顶部的元素上以及所有元素之间的 spaces 上，它会执行应有的操作。我知道它与 <ul> 标签有关，但不知道如何解决。这是代码：

HTML

<div class="menu">
  <ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Projects</a></li>
    <li><a>Services</a></li>
    <li><a>Contact</a></li>
  </ul>
</div>

CSS

.menu {
    float:right;
    margin-right: 50px;
    }
ul li {
    display: inline;
    text-decoration: none; 
    color: #003560;
    padding: 10px 50px;
    transition: all ease .3s;
    }
ul:hover li {
    color: #0089F9;
    opacity: .1;
    transition: all ease .3s;
    }
ul li:hover {
    opacity: 1;
    padding: 15px 55px;
    }
li {
    border: 2px solid #0089F9;
    border-radius: 5px;
    margin-left: 20px;
    }

https://jsfiddle.net/Vc2ug/49/

Answer 1

ul:hover li {
  transition: all ease .3s;
}

删除不透明度和颜色属性并使 ul:hover li 如上。实际上，这意味着当 moves 在 ul 标签上时，应用以下属性 lo li. 所以，当你放置在两个列表项之间时，它在 ul 上，所以我应用 opacity 到所有列表项。

Answer 2

只需在 <ul> 底部和顶部添加一些填充。像这样：

ul {
    padding: 50px 0 50px 0;
}

Here 是一个演示。

Answer 3

您可以使用 float: left 而不是 display: inline

ul li {
    display: block;
    float: left;
    text-decoration: none; 
    color: #003560;
    padding: 10px 50px;
    transition: all ease .3s;
}

https://jsfiddle.net/7w8w86my/1/

Answer 4

只需删除<li>

之间HTML中的空格

Answer 5

您的问题是，当您将光标指向 li 之间的 space 时，所有 ul 都会悬停。您需要更改 html 的结构并拒绝使用 ul 或添加一个小脚本。例如：https://jsfiddle.net/trean/sxoxpz2e/2/ , https://jsfiddle.net/trean/sxoxpz2e/2/embedded/result/

$('.menu > ul > li').hover(function() {
        $(this).parent().find('li').addClass('unhover');
    }, function() {
        $(this).parent().find('li').removeClass('unhover');
 });

CSS:

.unhover {
    color: #0089F9;
    opacity: .1;
    transition: all ease .3s;
    }

我不排除有没有 jquery 的方法，但到目前为止，除了拒绝 ul 支持层次结构 div.

CSS - 悬停在元素上会影响多个元素

CSS - hovering over element affects multiple elements

html

hover