how to change background color inside element of div on hover effect?

Question

Hover '.parent' and change backgroundcolor it (working).
Hover '.child' and change backgroundcolor it (working).
I want to hover '.child' and only change .child backgroundcolor ? How i do it ?

.parent {
  background-color: #cde;
  width: 100%;
  position: relative;
  height: 100px;
}

.parent:hover {
  background-color: black;
}

.child {
  float: right;
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 10px;
  background-color: #ff0000;
}

.child:hover {
  background-color: yellow;
}

<div class="parent">

  <span class="child">
  Click
 </span>

</div>

That is not possible, hovering a child always means hovering the parent as well. The only way to achieve this, would be to place the “child” outside of the “parent” in the DOM tree to begin with. — CBroe, Jun 25 '18 at 14:05

Temani Afif · Accepted Answer · 2018-06-25T14:18:18.997

A trick is to create another layer using the child element on hover to simulate the non-changing of the parent background.

Here is an example with box-shadow (On hover of child, change background color of parent container (CSS only))

.parent {
  background-color: #cde;
  width: 100%;
  height: 100px;
  position: relative;
  overflow:hidden;
}

.parent:hover {
  background-color: black;
}

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 10px;
  background-color: #ff0000;
}

.child:hover {
  background-color: yellow;
  box-shadow:0 0 0 1000px #cde;
}

<div class="parent">

  <span class="child">
  Click
 </span>
</div>

how to change background color inside element of div on hover effect?

1 Answers1