Hover on Child Without Hover Effect on Parent

hover on child without hover effect on parent

Basically you can't : How to style the parent element when hovering a child element?

But a trick is to use a sibling element :
http://jsfiddle.net/k3Zdt/8/

.parent {  width: 100px;  height: 100px;  padding: 50px;}
.child {  height: 100px;  width: 100px;  background: #355E95;  transition: background-color 1s;  position: relative;  top: -200px;}
.child:hover {  background: #000;}
.sibling {  position: relative;  width: 100px;  height: 100px;  padding: 50px;  top: -50px;  left: -50px;  background: #3D6AA2;  transition: background-color 1s;    }
.sibling:hover {  background: #FFF;}

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

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>

How to not execute parent's :hover on child :hover

Since you want to change the style of the parent element based on a pseudo-class of the child element, this isn't really possible with CSS alone today.

You can do it with the :has() pseudo-class but that is currently only supported in Safari (with support for Chrome a few months away and no sign of it in Firefox, Edge, Opera or elsewhere).

#parent {
  background: white;
  border: solid black 1px;
  padding: 2em;
  max-width: 50%;
  margin: auto;
}

#parent:hover:not(:has(#child:hover)) {
  background: orange;
}

#child {
  background: #aaa;
  border: solid black 1px;
  padding: 2em;
}

#child:hover {
  background: green;
}

<div id="parent">
  <div id="child"></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;
}

Hover on Child Without Hover Effect on Parent