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之外，什么都沒想到。