Question

样式不会在悬停时将显示更改为阻止。我将不胜感激。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>CSS Selectors</title>
    <style>
        div ul li:hover> ul {
            display:block;
        }
    </style>
</head>
<body>
    <div id="container">
        <ul>
            <li> List Item
                <ul style="display:none;">
                    <li> Child </li>
                </ul>
            </li>
            <li> List Item </li>
            <li> List Item </li>
            <li> List Item </li>
        </ul>
    </div>
</body>
</html>

Answer 1

有三个原因：

伪选择器中没有空格。
内联样式优先于嵌入式，因此即使您的选择器正确，display: block;也无效。
您正在选择一个ul，它是div的直接子节点，而设置为不显示的ul是div内部的子节点，因此无效。< / p>

尝试这样的事情：

div ul ul {
    display: none;
}
div:hover ul ul {
  display:block;
}

Answer 2

对display: block;

使用！important

尝试

div ul li:hover > ul {
    display:block!important;
}

Answer 3

将您的CSS更改为

div ul li:hover{
    display:block;
}

CSS选择器悬停不起作用

3 个答案: