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

Question

有什么方法可以在聚焦或悬停在其中一个子元素上时更改元素的 css 吗？

例如:当我将鼠标移到 A 上时，B 的背景颜色发生变化。如果 B 是 A 的后代，则有可能。

--A
-----B

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

DEMO

---

在 sibling 中:

---A
---B

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

DEMO

---

假设B是A的后代。
如果我想更改#A 背景，而我正悬停在 B 上怎么办？

--A
-----B

Answer 1

遗憾的是，目前无法在纯 CSS 中执行此操作...。但是，据说即将推出的父级选择器 可以在这种情况下很好地工作。点击here了解更多信息。

解决方法

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

DEMO

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