gpt4 book ai didi

html - CSS 选择器悬停不起作用

转载 作者:太空宇宙 更新时间:2023-11-03 19:43:03 24 4
gpt4 key购买 nike

悬停时样式不会将显示更改为阻塞。如有任何意见,我将不胜感激。

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

最佳答案

原因有以下三个:

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

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

  3. 您选择的 ul 是 div 的直接子级,而设置为不显示的 ul 是 div 内部 ul 的子级,因此这将不起作用。

尝试这样的事情:

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

关于html - CSS 选择器悬停不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19309135/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com