Css hover child to trigger effect on parent

Question

I have this HTML code:

<span id="search">
 <input type="submit" value="" id="button">
</span>

I want to change the opacity of #search::after when hovering #button

#button:hover #search::after {opacity:1;}

It wont work so I wonder if its even possible to do this.

Answer 1

Using only CSS It's impossible.

What you can do is to use JavaScript/Jquery to trigger a action, like this:

$("#button").hover( function() {
   $(this).parent().addClass("hover");
});

and in your css:

#search.hover::after {opacity:1;}

Related: Is there a CSS parent selector?

Answer 2

This is not possible with just CSS. You might try using Javascript to help with this.

$("#button").on("mouseenter",function(e){
     $("#search:after").css({"opacity":1});
})

However, in order to make a selection with a pseudo class, you'll need the jQuery psuedo shim:

http://jquery.lukelutman.com/plugins/pseudo/jquery.pseudo.js

Answer 3

No that's not possible because CSS doesn't have a parent selector.

But if you can change your html markup, then you can use adjacent sibling selector +

#button:hover + #search::after {
  content: "hovered"
}

<input type="submit" value="hover me" id="button" />
<span id="search"></span>

`

Answer 4

What is the size of your search container? Does it match the child? If so adding the hover to search will achieve the same effect. Otherwise you'll need to rearrange your markup or use javascript. I'm all for simple solutions though.

Answer 5

You Can Use Selector "+"

HTML

<a id="tooldrop">HOVER ME !</a>
<ul id="dropea">
  <li>ONE</li>
  <li>TWO</li>
</ul

CSS

    ul#dropea li{
        background-color: red;padding: 10px;opacity: 0;transition: all 0.3s ease-in-out;
    }
    #tooldrop:hover + ul#dropea li {
      transform: rotate(0) scale(1);
      opacity: 1;
    }

===========================================

JUST ADD "+" EVERY NEW ELEMENT

HTML

<a id="tooldrop">HOVER ME !</a>
<div class="block"></div>
<ul id="dropea">
  <li>ONE</li>
  <li>TWO</li>
</ul>

CSS

   ul#dropea li{
     background-color: red;padding: 10px;opacity: 0;transition: all 0.3s ease-in-out;
    }
    #tooldrop:hover + div.block + ul#dropea li {
      transform: rotate(0) scale(1);
      opacity: 1;
    }

---

ExteraDex