在悬停时,样式不会将显示更改为阻止.我将不胜感激任何评论.
<!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>
原因有三:
伪选择器中不能有空格.
内联样式优先于嵌入式,因此即使您的选择器正确,display: block;也无效.
你正在选择一个ul,它是div的直接子节点,而设置为不显示的ul是在div内部的ul的子节点,因此不起作用.
尝试这样的事情:
div ul ul {
display: none;
}
div:hover ul ul {
display:block;
}