Hover on child without changing parent

Question

Hover on child element <button> without hover effect on parent <h2>

.parent {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 31px;
  letter-spacing: normal;
  position: relative;
}

.parent:hover {
  color: orange;
}

span {
  line-height: unset;
  vertical-align: baseline;
  top: 0;
  left: 0;
  position: absolute;
  color: transparent;
  box-shadow: none;
  z-index: 5;
}

span button {
  position: absolute;
  left: 0;
  top: -20px;
  color: #fff;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  z-index: 5;
  background: #0085ba !important;
  border-radius: 50%;
  border: 2px solid #fff;
  box-sizing: border-box;
  padding: 3px;
  display: inline-block;
  overflow: hidden;
}

<h2 class="parent">
  Title
  <span class="child">
    <button>+</button>
  </span>
</h2>

You may have to introduce some Javascript to prevent the bubbling. Is that acceptable? — A Haworth, Jun 04 '22 at 05:22
@AHaworth i guess yes. i already thought about this. cause didn't find any solution with css — Victoria Lievikova, Jun 04 '22 at 18:41

score 3 · Answer 1 · answered Dec 26 '22 at 00:21

This has been asked before, and answers seem to come within the span of: "css can't do that", "you should probably restructure your divs" and "here's a trick". hover on child without hover effect on parent

Now I don't have the experience to say if a structure that neccesitates this is actually bad, but in either case, there is now a straight-forward solution with :has()

.parent {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 31px;
  letter-spacing: normal;
  position: relative;
}

.parent:not(:has(.child:hover)):hover {
  color: orange;
}

span {
  line-height: unset;
  vertical-align: baseline;
  top: 0;
  left: 0;
  position: absolute;
  color: transparent;
  box-shadow: none;
  z-index: 5;
}

span button {
  position: absolute;
  left: 0;
  top: -20px;
  color: #fff;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  z-index: 5;
  background: #0085ba !important;
  border-radius: 50%;
  border: 2px solid #fff;
  box-sizing: border-box;
  padding: 3px;
  display: inline-block;
  overflow: hidden;
}

<h2 class="parent">
  Title
  <span class="child">
    <button>+</button>
  </span>
</h2>

This is what that selector is saying in English: Select all elements ".parent" - except the ones who have any child elements ".child" being hovered on - when they are hovered on.

score 0 · Answer 2 · answered Jun 04 '22 at 03:38

0

This can be helpful

example

.html

<div class="parent1">
     <div class="child1">
          /*.....*/

.css

.parent1:hover{
 cursor: pointer;
 }

.parent1:hover .child1{
/*......*/
}

snippet

.parent:hover .child {
/* ... */
}

answered Jun 04 '22 at 03:38

Shrutik Dawane

1
1
2

Charles-Lévi BRIANI · Answer 3 · 2022-09-18T14:55:10.703

It's a little tricky.

First you need to get the parent from the child :

const _parent = document.querySelector('selectorOfParentFromChild')

After you have to add the class on child and remove on parent. You need to do it one child event : 'onMouseOver'.

SO:

[child, parent].forEach(node=>node.addEvenListener('onmouseover', (event)=>{
event.stopPropagation();
const _parent = document.querySelector('selectorOfParentFromChild')

node.classlist.add(wanted)

_parent.classlist.remove(wanted)

})

score -1 · Answer 4 · edited Jun 04 '22 at 13:08

You will have to delete the CSS for parent:hover and if you only want the hover effect on the button then the parent shouldn't have a hover effect in your CSS.

.parent {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 31px;
  letter-spacing: normal;
  position: relative;
}

span {
  line-height: unset;
  vertical-align: baseline;
  top: 0;
  left: 0;
  position: absolute;
  color: transparent;
  box-shadow: none;
  z-index: 5;
}

span button {
  position: absolute;
  left: 0;
  top: -20px;
  color: #fff;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  z-index: 5;
  background: #0085ba !important;
  border-radius: 50%;
  border: 2px solid #fff;
  box-sizing: border-box;
  padding: 3px;
  display: inline-block;
  overflow: hidden;
}

button:hover {
  color: orange;
}

Why would this make any difference to what happens on hover (other than a color change). The parent still turns orange. — A Haworth, Jun 04 '22 at 04:48

score -1 · Answer 5 · edited Jun 04 '22 at 11:20

-1

Add the below:

parent:hover {
  cursor:pointer
}

edited Jun 04 '22 at 11:20

Tyler2P

2,324
26
22
31

answered Jun 04 '22 at 04:00

Hazrat Gafulov

318
4
9

1

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Jun 04 '22 at 11:19

Hover on child without changing parent

5 Answers5