CSS - 悬停在元素上不适用于另一种样式 [英] CSS - Hover on element doesn't apply style to another one

问题描述

当另一个div悬停时，将样式应用于div时遇到问题。这是我的情景：

 < div id =nav> 
< div class =logged>< / div> 
< div class =nav_child>< / div> 
< / div> 
  

.logged：hover。 nav_child {
display：initial;
}
#nav .nav_child {
display：none;
}


但它不起作用。我也试过 .logged：hover> .nav_child 和 .logged：hover + .nav_child ，但仍然没有任何结果。它只适用于 #nav：hover .nav_child 但我需要在 .logged 被徘徊时显示它，而不是在 #nav 被徘徊。

有什么想法？

解决方案

刚刚通过邻接兄弟组合器解决。我声明并将'logged'称为id，并在.logged：hover和.nav_child之间添加+。

参考：邻接兄弟组合符： http://css-tricks.com/child-and-sibling-selectors

旧代码： http://jsfiddle.net/8rdh7m2j/

工作代码：

 < div id =nav> 
< div class =loggedid =logged> Hello< / div> 
< div class =nav_child> Puff< / div> 
< / div> 
 #logged：hover + .nav_child {
 display：initial; 
} 
 
 #nav .nav_child {
 display：none; 
} 
  

演示： http://jsfiddle.net/hwh3o8u0/1/

I have a problem with applying style to a div when another div is hovered. Here is my scenario:

<div id="nav">
    <div class="logged"></div>
    <div class="nav_child"></div>
</div>

.logged:hover .nav_child {
    display: initial;
}
#nav .nav_child {
    display: none;
}

But it doesn't work. I also tried .logged:hover > .nav_child and .logged:hover + .nav_child and still nothing. It only works with #nav:hover .nav_child but I need to show it when .logged is hovered, not when #nav is hovered.

Any ideas?

解决方案

Just solved with the Adjacent sibling combinator. I declare and call 'logged' as id and add + between .logged:hover and .nav_child it works.

Reference: Adjacent sibling combinator: http://css-tricks.com/child-and-sibling-selectors

Old code: http://jsfiddle.net/8rdh7m2j/

Working code:

<div id="nav">
<div class="logged" id="logged">Hello</div>
<div class="nav_child">Puff</div>
</div>
#logged:hover + .nav_child {
display: initial;
}

#nav .nav_child {
display: none;
}

Demo: http://jsfiddle.net/hwh3o8u0/1/

这篇关于CSS - 悬停在元素上不适用于另一种样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！