0

悬停时样式不会将显示更改为阻塞。我将不胜感激任何评论。

<!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>
4

3 回答 3

9

原因有以下三个：

  1. 伪选择器中不能有空格。

  2. 内联样式优先于嵌入样式，因此即使您的选择器是正确的，display: block;也不会有任何效果。

  3. 您正在选择一个 ul，它是 div 的直接子级，而设置为不显示的 ul 是 div 内部的 ul 的子级，因此这不起作用。

尝试这样的事情：

div ul ul {
    display: none;
}
div:hover ul ul {
  display:block;
}
于 2013-10-11T02:12:46.060 回答
1

使用 !importantdisplay: block;

尝试

div ul li:hover > ul {
    display:block!important;
}
于 2013-10-11T02:16:07.380 回答
0

将您的 CSS 更改为

div ul li:hover{
    display:block;
}
于 2013-10-11T02:11:28.913 回答