Change Background-Color of Child Div When Parent Div is Hovered

Question

Similar to this question, but I'm not sure if the answer applies.

I'm trying to make it so that when you hover over any portion of this parent div:

The top div within it changes background-color:

I have:

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

I'm not sure where to begin. Is it better to try this with JavaScript / jQuery or CSS?

JSFiddle

EDIT: Updated, working JSFiddle

score 4 · Accepted Answer · answered May 20 '20 at 15:00

You can add additional hover behavior in CSS to a child element like so:

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

Thanks, and the key for my specific solution is to change the styles of the `border-color` of the parent div on hover as well: [JSFiddle](https://jsfiddle.net/HappyHands31/h1oas3tz/14/) — HappyHands31, May 20 '20 at 15:17

score 1 · Answer 2 · answered May 20 '20 at 14:56

What you want to do essentially is change the color of the first child node, when the parent node is hovered over. I also assume you want to change it back when the hover leaves. So you need to add a mouseenter and mouseout event, changing e.target.childNodes[0].style.background So, psuedo code

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

score 1 · Answer 3 · answered May 20 '20 at 15:07

The below example might help in achieving what you want through CSS alone.

#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>

Change Background-Color of Child Div When Parent Div is Hovered

3 Answers3