Hover on child should turn off hover effect on parent [duplicate]

by

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>

More Related Contents:

  1. How to change the cursor into a hand when a user hovers over a list item?
  2. What is the opposite of :hover (on mouse leave)?
  3. CSS transition effect makes image blurry / moves image 1px, in Chrome?
  4. Is there any way to hover over one element and affect a different element? [duplicate]
  5. Change opacity on all elements except hovered one
  6. How to use ‘hover’ in CSS
  7. CSS: Hover one element, effect for multiple elements?
  8. How can I delay a :hover effect in CSS?
  9. SVG USE element and :hover style
  10. Does css hover work on mobile devices?
  11. CSS disable hover effect
  12. How can I change a button’s color on hover?
  13. Spin or rotate an image on hover
  14. image moves on hover – chrome opacity issue
  15. CSS: styled a checkbox to look like a button, is there a hover?
  16. hover on child without hover effect on parent [duplicate]
  17. div background color, to change onhover
  18. CSS hover border makes elements adjust slightly
  19. Is it possible to change only the alpha of a rgba background colour on hover?
  20. How to display and hide a div with CSS?
  21. Is there an opposite CSS pseudo-class to :hover?
  22. prevent a pseudo element from triggering hover?
  23. How to apply child:hover but not parent:hover
  24. How to draw this chart in html and CSS? [closed]
  25. What is the best way to clear the CSS style “float”?
  26. Responsive CSS triangle with percents width
  27. position: absolute without setting top/left/bottom/right?
  28. Z-index with before pseudo-element
  29. Why does clip-path (and other properties) affect the stacking order (z-index) of elements later in DOM?
  30. What is the difference between :before and ::before?

Leave a Comment