Question

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

Answer 1

定位span时，您需要定位下一个+相邻的兄弟选择器，如：

.dropdown span:hover + .dropdown_content{ display:block }

https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

Answer 2

.dropdown span:hover .dropdown_content{ display:block }无效，因为span不包含.dropdown_content元素。他们是兄弟姐妹。

使用+选择兄弟姐妹

＆＃13;

*{ padding:0; margin:0 }
  
.dropdown_content{ display:none; }
.dropdown span:hover + .dropdown_content{ display:block }

＆＃13;

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

＆＃13;

当我包含span时，为什么悬停不起作用

2 个答案: