Hover on child without changing parent - html

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>

Answer 1

This can be helpful
example
.html
<div class="parent1">
<div class="child1">
/*.....*/
.css
.parent1:hover{
cursor: pointer;
}
.parent1:hover .child1{
/*......*/
}
snippet
.parent:hover .child {
/* ... */
}

Answer 2

Add the below:
parent:hover {
cursor:pointer
}

Answer 3

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

Answer 4

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.

Answer 5

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