Make CSS :Hover Only Affect Parent Element

Make css :hover only affect parent element

There is a pure css solution (even two in fact) but both come at a cost.

1. You can add pointer-events:none; to your child element - but it will not respond to it's own hover styles either. Pointer-events unfortunately are not supported in IE below version 11 (http://caniuse.com/#search=pointer-events).

2. Wrap content of your parent element (apart from positioned child) in another one (thats the cost of this method) and apply hover styles to this wrapper.

Examples of both methods here.

.parent-2,
.parent { position:relative; background:#ddd; width:100px; height:100px; }
.parent:hover { background:blue; }
.child { position:absolute; top:0; left:130px; width:100px; height:50px; border:1px solid blue; pointer-events:none; }
/* doesn't work in opera and ie */

.content { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;}
.content:hover { background:blue; }

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 style the parent element when hovering a child element?

I know it is an old question, but I just managed to do so without a pseudo child (but a pseudo wrapper).

If you set the parent to be with no pointer-events, and then a child div with pointer-events set to auto, it works:)

Note that <img> tag (for example) doesn't do the trick.

Also remember to set pointer-events to auto for other children which have their own event listener, or otherwise they will lose their click functionality.

div.parent {      pointer-events: none;}
div.child {    pointer-events: auto;}
div.parent:hover {    background: yellow;}    

<div class="parent">  parent - you can hover over here and it won't trigger  <div class="child">hover over the child instead!</div></div>

Hover effect only on parent div

You changed the opacity of your elements but they're still in the document and so they're triggering the effect.

By using visibility: hidden / visible, hovering the labels won't trigger the effect :

.sidebar-item span {
    opacity:0;
    transition: 0.5s;
    visibility : hidden
}       
#sidebar:hover .sidebar-item span{
    opacity:1;
    visibility : visible
}

Your updated JSFiddle

affect parent element by hover on child

I have a workaround using CSS using pointer-events. This might help.

.element {  background: red;  padding: 10px;  margin: 10px;  pointer-events: none;}
.HoverThisElement {  background: yellow;  padding: 15px;  pointer-events: auto;}
.element:hover {  background: green; //add some styles you want to parent element}

<div class="bigWrap">  <div class="element">
    <div class="HoverThisElement"></div>
  </div>  <div class="element">
    <div class="HoverThisElement"></div>
  </div>  <div class="element">
    <div class="HoverThisElement"></div>
  </div></div>

On child hover change the css of Parent

As already mentioned there is no parent selector but if you recognise that you are already hovering over the parent you can achieve what you want.

A rough example:

#main-menu > li:hover > a
{
  background-color: #F00;
}

#main-menu >  li > .submenu > li:hover
{
  background-color:#00F;
}

<ul id="main-menu">
  <li>
    <a href="#">
      <i class="fa fa-building-o" aria-hidden="true"></i>
      Private Limited
      <i class="fa fa-caret-down"></i>
    </a>
    <ul class="submenu">
      <li><a href="#0">Company</a>
      </li>
      <li><a href="#0">Contact</a>
      </li>
      <li><a href="#0">Industry</a>
      </li>
    </ul>
  </li>
</ul>

How to keep hover effect only on the parent

You want the :hover effect only inside the "Item 1" right?

.treeview > ul > li:hover > span {
    color: red;
}

Also check this Fiddle.

UPDATED (based on your comment)

.treeview  li:hover > span {
    color: red;
}

And updated Fiddle. This however will also trigger the span on "Item 1.1.1" when hovered...

Make hovering over a parent element only affect its own text, not child elements

You can make the h1 change color on hover, while keeping the span inside the h1 black.

h1:hover {  color: red;}
h1:hover span {  color: black;}

<h1>{ <span>js</span> }</h1>

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>

---

Related Topics