当父 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 的背景颜色的主要内容,如果未能解决你的问题,请参考以下文章