0

I want to hover image or text in a div, and want to change the background-color of the whole div including the inner div of the hovering element.

Here is the code:

.hover-div {
  padding: 20px;
  display: none;
  font-size: 15px;
  font-family: sans-serif;
  background-color: #186459;
  color: white;
}

.hover-object:hover+.hover-div {
  background-color: #666666;
  display: block;
}

<div className="touch">
  <div className="hover-object">
    <img src={dashboardkpi} className="svg-image" alt='img' />
    <p className="item-names">Dashboard KPI</p>
  </div>
  <p className="hover-div">View business analytics</p>
</div>

I want to Hover class="hover-object" and change the background color of whole div named 'touch' to blue and display class="hover-div" content.

Till now, when i hover , only hover-div appears with change background color. I wish when i hover, the hover content display and the whole div 'touch' background color change.

Run_Script
  • 2,146
  • 2
  • 10
  • 24
Jawad
  • 23
  • 5
  • If you want to traverse back up the DOM from a child element to parent, this is unfortunately not possible with CSS. You can only traverse from parent > child and not child > parent. You could resort to JavaScript OR change your html structure (recommended) so you can keep it CSS 'only', like the suggestion of Chanond Wongpiya below. – Dave May 05 '20 at 19:35

1 Answers1

0

I think you're missing .touch:hover in your CSS.

Chanond Wongpiya
  • 21
  • 5