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上，因此我应用{{1}所有列表项。

Answer 3

只需在底部和顶部添加一些填充ul { padding: 50px 0 50px 0; }即可。像这样：

import _winreg
def subkeys(key):
    i = 0
    while True:
        try:
            subkey = _winreg.EnumKey(key, i)
            yield subkey
            i+=1
        except WindowsError as e:
            break

def traverse_registry_tree(hkey, keypath, tabs=0):
    reg_dict = {}
    key = _winreg.OpenKey(hkey, keypath, 0, _winreg.KEY_READ)
    for subkeyname in subkeys(key):
        reg_dict[subkeyname] = subkeyname
    return reg_dict

keypath = r"SOFTWARE\\Wow6432Node\\Microsoft\\Windows\\CurrentVersion\\Uninstall"

print traverse_registry_tree(_winreg.HKEY_LOCAL_MACHINE, keypath)

Here是一个演示。

Answer 4

只需删除<li>

中HTML中的空格即可

Answer 5

当你将光标指向li all 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 - 悬停在元素上会影响多个元素

5 个答案: