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

Posted

技术标签:

【中文标题】当父 Div 悬停时更改子 Div 的背景颜色【英文标题】:Change Background-Color of Child Div When Parent Div is Hovered 【发布时间】:2020-09-06 23:59:18 【问题描述】:

类似于this question,但我不确定答案是否适用。

我正在努力做到这一点,以便当您将鼠标悬停在此父 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

【问题讨论】:

【参考方案1】:

您可以在 CSS 中向子元素添加额外的悬停行为,如下所示:

/*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>

【讨论】:

谢谢,我的具体解决方案的关键是更改悬停时父 div 的 border-color 的样式:JSFiddle【参考方案2】:

当父节点悬停在上面时,您要做的基本上是更改第一个子节点的颜色。我还假设您想在悬停离开时将其改回。所以需要添加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)
;

【讨论】:

【参考方案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>

【讨论】:

以上是关于当父 Div 悬停时更改子 Div 的背景颜色的主要内容,如果未能解决你的问题,请参考以下文章

如何在悬停效果上更改 div 元素内部的背景颜色?

悬停文本使 Div 更改颜色 - CSS

更改嵌套 div 内鼠标悬停时的图层颜色

单击时多次更改 Div 背景颜色(循环)

将鼠标悬停在单个子 div 上时,将父 div 更改为不同的背景

悬停时更改 div 内 H2 的字体颜色