gpt4 book ai didi

html - 为什么在包含 span 时悬停不起作用

转载 作者:太空宇宙 更新时间:2023-11-03 21:21:02 25 4
gpt4 key购买 nike

.dropdown span:hover .dropdown_content{ display:block } 不工作。

这是什么原因???

  *{ padding:0; margin:0 }

.dropdown_content{ display:none; }
.dropdown span:hover .dropdown_content{ display:block }
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drop down menu</title>
<link href="login.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown_content">
<p>Hello world</p>
</div>
</div>
</body>
</html>

最佳答案

.dropdown span:hover .dropdown_content{ display:block } 不起作用,因为 span 不包含 .dropdown_content 元素。他们是兄妹。

使用+选择 sibling

*{ padding:0; margin:0 }

.dropdown_content{ display:none; }
.dropdown span:hover + .dropdown_content{ display:block }
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drop down menu</title>
<link href="login.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown_content">
<p>Hello world</p>
</div>
</div>
</body>
</html>

关于html - 为什么在包含 span 时悬停不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37316649/

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