html - CSS - 在悬停时操作另一个元素

Question

我需要将#hidden 更改为悬停在display:block何时。#aaa它不起作用，因为#aaa不在同一级别#hidden- 有没有办法在悬停时操纵完全独立的元素？我正在尝试制作一个基于 CSS 的带有子导航的导航，并在导航项悬停时显示相应的子导航。

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

将鼠标悬停在元素上只能影响 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;
}

更改了类的 id 并将悬停添加到父元素，以便悬停在显示的文本上不会恢复为 display:none;

Answer 2

由于您的链接不是您的#hiddendiv 的兄弟（因此您不能使用直接邻接选择器），您应该更改最后一条规则

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

Answer 3

它不是直接兄弟所以你需要使用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;
}