Show :After When Hovering Over the Parent Element via CSS

Show :after when hovering over the parent element via CSS

Change it to #myDiv:hover::after

You can use either :after or ::after but in the selectors module (3) it states that the latter is now intended to be used to distinguish them from pseudo-classes

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>

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>

How to get element to display on hover of parent?

The reason the hover stops is that there is a gap below the #one lis where there's nothing to hover over. Change .one {top:85px;} to .one {padding-top:15px;} or amount is appropriate to allow for there to be something to hover over.

Also, if you want to fine-tune how far down from the top that the padding begins, you can use a combination of padding-top and top such as .one{padding-top:25px;top:60px} so that the dropdown content starts at 85px from the top.

$(function() {

  $('li#one').hover(function() {

    var el_two = $(this);

    var el_id = el_two.attr('id');

    var el_link = el_two.attr('data-at');

    var el_sel = '#' + el_link + '.' + el_id;

    $(el_sel).toggleClass('is-active');

  });

});

.menu__container {

  margin: 0 auto;

  padding: 10px;

}

.two {

  display: none;

}

.is-active {

  display: block;

}

.one {

  display: none;

  top: 60px;

  padding-top: 25px;

  position: absolute;

  background: #777;

}

li#one>a {

  padding: 10px;

  background-color: #eee;

}

.menu__first {

  background-color: #eee;

}

#one:hover>div.one {

  display: block;

}

#one {

  float: left;

  display: block;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="menu__container">

  <ul class="menu__first">

    <li id="one">

      <a href="#"> first</a>

      <div class="one">

        <ul>

          <li data-at="some-link" id="two">

            <a href="#"> some</a>

          </li>

          <li data-at="path-link" id="two">

            <a href="#"> path</a>

          </li>

          <li data-at="another-one" id="two">

            <a href="#"> another one</a>

          </li>

        </ul>

        <div class="dropdown">

          <div class="two" id="some-link">some link text</div>

          <div class="two" id="path-link">path link</div>

          <div class="two" id="another-one">another one</div>

        </div>

      </div>

    </li>

    <li id="one">

      <a href="#"> second</a>

      <div class="one">

        <ul>

          <li>

            <a href="#"> another some</a>

          </li>

          <li>

            <a href="#"> another path</a>

          </li>

        </ul>

      </div>

    </li>

    <li id="one">

      <a href="#"> third</a>

      <div class="one">

        <ul>

          <li>

            <a href="#"> third some</a>

          </li>

          <li>

            <a href="#"> third path</a>

          </li>

        </ul>

      </div>

    </li>

  </ul>

</div>

How to affect next element of parent element when hover

you could use the general sibling selector:

div:hover ~ div.second{background:yellow}

<div class="first">

   <div class="first-sub">

       <a href="#">first</a> 

   </div>

</div>

<div class="second">sec</div>

#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>

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