Question

当display:block悬停时，我需要将#hidden更改为#aaa。它不起作用，因为#aaa与#hidden不在同一级别 - 有没有办法在悬停时操纵一个完全独立的元素？我正在尝试制作一个基于CSS的导航w / a 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

将鼠标悬停在元素上只会影响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并将hover添加到父元素，以便将鼠标悬停在显示的文本上不会恢复为display：none;

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

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

3 个答案: