当父 Div 悬停时更改子 Div 的背景颜色

Question

类似于这个问题，但我不确定答案是否适用。

我正在努力做到这一点，以便当您 hover 超过此父 div 的任何部分时：

其中的顶部 div 更改背景颜色：

我有：

 /* Maybe something like this? var oldBackground; var parentNode = document.getElementByClassName('item'); var childNodes = document.getElementsByClassName('child'); parentNode.onmouseenter = e => { var c = e.target.childNodes[0] c && ((oldBackground = c.style.background) &c.style.background="blue") }; parentNode.onmouseout = e => { var c = e.target.childNodes[0] c && oldBackground && (c.style.background=oldBackground) }; */

 .dashboard { display: flex; }.dashboard.item { border-radius: .25rem; border: 1px solid rgba(0,0,0,.125); background: white; text-align: center; flex-grow: 1; margin-right: 20px; width: 20%; }.dashboard.item:hover { cursor: pointer; border: 1px solid #A7A7A7; }.dashboard-item-top { border-bottom: 1px solid #dfdfdf; padding: 2px; font-size: 20px; transition: background-color 0.5s ease; /*this background color should change to #F2F3F3 when.item div is hovered*/ }.info-block-item { font-size: 20px; }

 <div class="dashboard"> <div class="item"> <div class="dashboard-item-top"> Classes </div> <div class="dashboard-item-bottom"> <span class="info-block-item">0</span> </div> </div> </div>

我不知道从哪里开始。 用 JavaScript / jQuery 或 CSS 试试这个更好吗？

JSFiddle

---

编辑：更新，工作JSFiddle

Answer 1

您可以将 CSS 中的其他 hover 行为添加到子元素，如下所示：

/*on hovering the .item class, manipulate the child with the class .dashboard-item-top*/
.dashboard .item:hover > .dashboard-item-top {
    background: #CECECE;
    /*any other styles*/
}

 .dashboard { display: flex; }.dashboard.item { border-radius: .25rem; border: 1px solid rgba(0,0,0,.125); background: white; text-align: center; flex-grow: 1; margin-right: 20px; width: 20%; }.dashboard.item:hover { cursor: pointer; border: 1px solid #A7A7A7; }.dashboard.item:hover >.dashboard-item-top { background: #CECECE; }.dashboard-item-top { border-bottom: 1px solid #dfdfdf; padding: 2px; font-size: 20px; transition: background-color 0.5s ease; /*this background color should change to #F2F3F3 when.item div is hovered*/ }.info-block-item { font-size: 20px; }

 <div class="dashboard"> <div class="item"> <div class="dashboard-item-top"> Classes </div> <div class="dashboard-item-bottom"> <span class="info-block-item">0</span> </div> </div> </div>

Answer 2

当父节点悬停在上面时，您要做的基本上是更改第一个子节点的颜色。 我还假设您想在 hover 离开时将其改回。 所以你需要添加一个 mouseenter 和 mouseout 事件，改变e.target.childNodes[0].style.background所以，伪代码

var oldBackground;
parentNode.onmouseenter = e => {
    var c = e.target.childNodes[0]
    c && ((oldBackground = c.style.background) &c.style.background="blue")
};

parentNode.onmouseout = e => {
    var c = e.target.childNodes[0]
    c && oldBackground && (c.style.background=oldBackground)
};

Answer 3

下面的示例可能有助于仅通过 CSS 实现您想要的。

 #parent { cursor: pointer; } #parent:hover.parent-highlight { background-color: red; color: white; }

 <div id="parent"> <div>hover over me</div> <div>hover over me</div> <div>hover over me</div> <div class="parent-highlight">I get highlighted</div> </div>