为什么在包含跨度时悬停不起作用
[英]Why hover not working when I include span
问题描述
.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>
2 个解决方案
解决方案1
2 2016-05-19 07:32:58
定位span ，您需要定位下一个+相邻的同级选择器，例如：
.dropdown span:hover + .dropdown_content{ display:block }
https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors
解决方案2
2 已采纳 2016-05-19 07:33:50
.dropdown span:hover .dropdown_content{ display:block }不起作用，因为span不包含.dropdown_content元素。 他们是兄弟姐妹。
使用+选择同级
*{ 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>
为什么当我输入 hover 时下拉菜单没有显示？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.