CSS Hover on a Div, But Not If Hover on His Children

CSS hover on a div, but not if hover on his children

The ability to stop an element's hover effect when the child is hovered is not currently possible with the CSS selectors that we have, this is as close as we can get without javascript - affecting the child on hover in addition to affecting the parent. This will only work if the child is 100% of the width and height of the parent

2022 edit: We almost have this functionality using the :has() psuedo-class. So if you're reading this in the future you may be able to do this depending on your browser needs:

.parent:has(.class1:hover) {
   background: #ffffff;
}

Apply :hover on parent div but not on child elements

You are not using :hover as you want to, that white space between selector and pseudo class (#container :hover) it means all child element will have the hover effect, in code means (#content *:hover), and that's why you have the p and the button with the hover effect.

You can remove that white space and apply the hover in #box and button only

Also I would advise not using the heading h5 as parent of the button because it isn't much correct in terms of semantics

body {
  font-family: sans-serif;
}

.button {
  width: 60px;
  height: 60px;
}

#box {
  background-color: cyan;
  border-radius: 10px;
  height: 200px;
  width: 200px;
}

#box:hover {
  box-shadow: 0 1px 5px rgb(137, 137, 138);
}

button:hover {
  transform: scale(1.2);
  transition-duration: 0.5s;
}

<div id="container">
  <div id="box">
    <p>content</p>
    <button class="button">click me!</button>
  </div>
</div>

CSS Hover Affect Children Only Not The Parent

.collection-item :hover {
    background-color: lightblue;
}

change this to(remove space between .collection-item and :hover)

.collection-item:hover {
    background-color: lightblue;
}

How to apply CSS on child element when hover parent element?

Remove the +

 #DraggableImage:hover .onHover{
      display: block;
    }

CSS - blur all children except the hovered one, just when hovering over a children

Yes you can but you need to target the parent and the child, like below

We say when parent is hovered(it is hovered when you hover over its child) and target the children which is not hovered, make them blurry

.child {
  height: 50px;
  width:100px;
}
.child:nth-child(1) {
  background-color: red;
}.child:nth-child(2) {
  background-color: yellow;
}.child:nth-child(3) {
  background-color: blue;
}.child:nth-child(4) {
  background-color: green;
}

.parent:hover .child:not( :hover ) {
  filter: blur(15px);
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

---

Related Topics