Question

我有下一个html结构：

<div class="parent">
    <div class="child"></div>
</div>

和css：

.parent {
    width: 100px;
    height: 100px;
}

.parent:hover {
    background-color: red;
}

.child {
    width: 50px;
    height: 50px;
}

如果我的父div悬停时如何更改子div的背景颜色？我可以用css做，或者我应该使用JQuery吗？

Answer 1

您可以使用解决方案

.parent {
  background-color: green;
  width: 100px;
  height: 100px;
}

.parent:hover > .child{
  background-color: red;
}

.child {
  width: 50px;
  height: 50px;
}

<div class="parent">
    <div class="child"></div>
</div>

希望这会对你有所帮助。

Answer 2

你可以试试这个

.parent:hover .child {
   background-color: red;
}

Answer 3

试试这个：

.parent:hover .child {
  background-color: blue;
}

＆＃13;

.parent {
  width: 100px;
  height: 100px;
}

.parent:hover {
   background-color: red;
}

.parent:hover .child{
  background-color: blue;
}

.child {
  width: 50px;
  height: 50px;
}

＆＃13;

<div class="parent"> PARENT
  <div class="child">CHILD</div>
</div>

＆＃13;

Answer 4

如果我理解正确，您只需要更改

.parent:hover {
    background-color: red;
}

到

.parent:hover .child {
    background-color: red;
}

Answer 5

为.parent添加新规则：hover .child

检查以下示例：

.parent {
    width: 100px;
    height: 100px;
    background-color:blue;
}

.parent:hover,
.parent:hover .child  {
    background-color: red;
}

.child {
    width: 50px;
    height: 50px;
}

.child {
background-color:yellow;
}

<div class="parent">
    <div class="child"></div>
</div>

父元素悬停时如何更改子元素的背景？

5 个答案: