How to Apply Child:Hover But Not Parent:Hover

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>

How to apply child:hover but not parent:hover

So this is REALLY ugly, but it works (kind of). I'm basically creating a duplicate of parent as a sibling of child. parent-overwrite is hidden by default, then displayed on the hover of child. Chrome doesn't like it unless you use the + selector instead of the ~ selector. This isn't very scalable, but it may work.

As the other guys posted, javascript would likely be a better solution.

 <style>  .parent { padding: 100px; width: 400px; height:400px; position: relative; z-index: 998; }  .parent:hover { background-color: green; }  .child { padding: 100px; width: 200px; height:200px; position: relative; z-index: 1000; }  .child:hover { background-color: blue; }  .parent-overwrite { padding: inherit; width: inherit; height: inherit; position: absolute; top: 0; left: 0; z-index: 999; background-color: #FFF; display: none; }  .child:hover ~ .parent-overwrite { display: block; }</style>
<div class="parent">    <div class="child">Child</div>    <div class="parent-overwrite"></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>

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 apply CSS on child element when hover parent element?

Remove the +

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