How to Set CSS Hover Effect, on Parent and Child Elements

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>

Style child element when hover on parent

Yes, you can definitely do this. Just use something like

.parent:hover .child {
   /* ... */
}

According to this page it's supported by all major browsers.

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

Remove the +

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

Show child element on parent hover in CSS

if you have styled hide like this (the page will be displayed as if the element is there but not seen):

#parent .hidden-child{
    visibility: hidden;
}

you may do it like this to just hide it:

#parent:hover .hidden-child{
    visibility: visible;
}

and if you have styled it like this (the page will be displayed as if the element is not there):

#parent .hidden-child{
    display: none;
}

you may do it like this:

#parent:hover .hidden-child{
    display: block;
}

In Action!

#parent {
    width: 10rem;
    height: 10rem;
    background-color: #ababab;
}

#parent .hidden-child{
    visibility: hidden;
}

#parent:hover .hidden-child{
    visibility: visible;
}

<div id="parent">
    <button class="hidden-child">Delete</button>
</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>

Child element hover, effect Parent

There's no selectors like that yet but you can use "~" selector.
Here's an excerpt from w3.org

The general sibling combinator is made of the "tilde" (U+007E, ~)
character that separates two sequences of simple selectors. The
elements represented by the two sequences share the same parent in
the document tree and the element represented by the first sequence
precedes (not necessarily immediately) the element represented by the
second one.

So you can do it like that:

HTML:

<div class="parent-like-div">Do Something</div>
<div class="to-be-controlled">Control me</div>

CSS:

.parent-like-div:hover ~ .to-be-controlled
{your code apply on .to-be-controlled when you hover .parent-like-div}

http://jsfiddle.net/h7grfeod/

Changing the child element's CSS when the parent is hovered

Why not just use CSS?

.parent:hover .child, .parent.hover .child { display: block; }

and then add JS for IE6 (inside a conditional comment for instance) which doesn't support :hover properly:

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

Here's a quick example: Fiddle

---

Related Topics