Css hover child to trigger effect on parent

问题

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.

回答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?

回答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

回答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>

回答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.

回答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

来源：https://stackoverflow.com/questions/37488517/css-hover-child-to-trigger-effect-on-parent

标签

html

css

hover

parent-child