html - 将鼠标悬停在css中的另一个元素上时更改元素css？

Question

有没有办法在关注或悬停在它的一个子元素上时更改元素的 css？

例如：当我在 A 上移动鼠标时，B 的背景颜色发生了变化。如果 B 是 A 的后代，这是可能的。

--A
-----B

使用#A:hover #B { background-color: blue }

演示

---

在兄弟姐妹中：

---A
---B

这是 ：#A:hover ~ #B { background-color: blue; }

演示

---

假设 B 是 A 的后代。
如果我想更改#A 背景，而我在 B 上盘旋。怎么可能？

--A
-----B

Answer 1

不幸的是，在纯 CSS 中这样做是不可能的……目前。但是，据说有一个即将推出的父选择器在这种情况下会很好地工作。点击这里了解更多信息。

解决方法

同时，您也可以使用 javascript 和/或 jquery 轻松完成此任务。

演示

HTML

<div id="div1">
  div 1 area
  <p id="paragraph">
    This is paragraph
  </p>
</div>

CSS

#div1 {
  border:1px solid lightgray;
}
p {
  margin: 50px;
  background-color: lightblue;
  padding: 8px;
}

.altbg {
    background:grey;
}

jQuery

$(function(){
    $('#paragraph').mouseenter(function(){
        $(this).parent().addClass('altbg')
    }).mouseout(function(){
        $(this).parent().removeClass('altbg')
    });
});

Answer 2

在css中实际上是可能的。有人做了这个小提琴：http: //jsfiddle.net/u7tYE/

#a:hover + #b {
        display:block;
        background-color:rgb(200,200,150);
    }
    #b{display:none;background-color:rgb(200,200,150;}

<a id="a">Menu</a>
<div id="b">
<p>Home</p>
<p>About</p>
<p>Login</p>
</div>

它完美地工作。