CSS - манипулировать другим элементом при зависании

Question

Мне нужно изменить #hidden на display:block, когда #aaa завис над. Он не работает, потому что #aaa не соответствует уровню #hidden - есть ли способ управления полностью отдельным элементом при наведении курсора? Я пытаюсь создать CSS-навигацию w/subnav и показывать соответствующий subnav, когда навигационный элемент зависает.

HTML:

<div class="cheetahContainer"> 
    <div id="cheetah"> 
     <p><a href="#">Cheetah</a></p> 
    </div> 
</div> 
<div id="hidden"> 
     <p>A cheetah is a land mammal that can run up 2 60mph!!!</p> 
</div> 

CSS:

#cheetah { 
    background-color: red; 
    text-align: center; 
} 

a { 
    color: blue; 
} 

#hidden { 
    display:none; 
    color: orange; 
} 
#cheetah:hover{ 
    background-color:green; 
} 

#cheetah:hover + #hidden { 
    display:block; 
} 

http://jsfiddle.net/LgKkU/575/

Answer 1

Поскольку ваша ссылка не родственный ваших #hidden DIV (таким образом, вы не можете использовать непосредственный селектор смежности) , вы должны изменить последнее правило с помощью

.cheetahContainer:hover + #hidden { 
    display:block; 
} 

Answer 2

Это не является прямым родственный, так что вы должны использовать JS

Вот пример того, что нужно сделать:

var $cheetah = document.getElementById('cheetah'); 
var $hidden = document.getElementById('hidden'); 
$cheetah.addEventListener('mouseover', function() { 
    $hidden.style.display = 'block'; 
}); 
$cheetah.addEventListener('mouseout', function() { 
    $hidden.style.display = 'none'; 
}); 

Или вы можете использовать контейнер:

.cheetarContainer:hover + #hidden { 
    display: block; 
} 

Answer 3

Наведение над элементом может влиять только на дочерние элементы в css. Вот фикс для примера:

<div class="cheetahContainer"> 
    <div id="cheetah"> 
     <p><a href="#">Cheetah</a></p> 
    </div> 
    <div id="hidden"> 
      <p>A cheetah is a land mammal that can run up 2 60mph!!!</p> 
    </div> 
</div> 

Однако я бы рекомендовал изменения CSS-то вроде этого:

.cheetahContainer:hover .hidden { 
    display: block; 
} 

Изменен из идентификаторов классов и добавил зависание к родительскому элементу, так что нависает над обнаруженный текст не возвращается к отображению: none;