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

Question

我有一个在屏幕上浮动的菜单，当将鼠标悬停在某个元素上时，它会做它必须做的事情，其余部分的不透明度正在改变，仅强调了悬停的元素。 但是，当将鼠标悬停在空白空间上的元素之间时，中间的一小部分空间会更改所有元素的不透明度。 如果将鼠标悬停在其底部或顶部附近的元素以及所有元素之间的空格上，它会执行应有的操作。 我知道它与<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

您可以使用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 2

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

删除的不透明性和颜色属性，并如上所述使ul:hover li 。 实际上，这意味着当移动位于ul标签上时，请应用以下属性lo li. 因此，当您放置在两个列表项之间时，它在ul ，因此我将opacity应用于所有列表项。

Answer 3

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

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

这是一个演示。

Answer 4

只需删除<li>之间的HTML中的空格即可

Answer 5

当您将光标指向所有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之外，什么都没想到。