CSS：hover on other element？ [英] CSS :hover on other element?

问题描述

简短问题：为什么当我悬停时 .b 的 background-color 不会改变？ .a ？

Short question: Why does the background-color of .b does not change when I hover? .a?

CSS

.a {
    color: red;
}

.b {
    color: orange;
}

.a:hover .b {
    background-color: blue;
}

HTML

<div id="wrap">
    <div class="a">AAAA</div>
    <div class ="b">BBBB</div>
</div>

http：// jsfiddle.net/2NEgt/

推荐答案

您需要具有 .a：hover + .b 而不是 .a：hover .b

.a：hover .b 可用于

<div class="a">AAAA
  <div class ="b">BBBB</div>
</div>

如果在某个时候你需要在.a和.b之间有一些元素，需要使用 .a：hover〜.b ，它适用于 .a ，而不只是下一个。

If at some point you'll need to have some elements between .a and .b, then you'll need to use .a:hover ~ .b, which works for all siblings of .a coming after it, not just the next one.

演示 http ：//jsfiddle.net/thebabydino/EajKf/

这篇关于CSS：hover on other element？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！