2016-05-19 4 views
0

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

+0

Извините, но это работает для меня (Хром 52) .. –

+0

Попробуйте в другом браузере ... – Malik

+0

Работа для меня тоже. –

ответ

2

.dropdown span:hover .dropdown_content{ display:block } не работает, потому что продолжительность не содержат .dropdown_content ele Мент. Они братья и сестры.

Использование + для выбора братьев

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

При ориентации span, чем вы должны быть ориентированы на следующий + смежный селектор родственного типа:

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

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

+1

Почему у этого есть понижение? Это правильно –

+0

@quentin http://jsbin.com/figahov/1/edit?html,css,output –

Смежные вопросы