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.

In this case if you want to show the after element and there is no other elements just the input ... isn't the same trigger the hover on the parent span? — DaniP, May 27 '16 at 17:09

score 4 · Answer 1 · edited May 23 '17 at 10:28

4

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?

edited May 23 '17 at 10:28

Community

1
1

answered May 27 '16 at 16:46

jNewbie

334
1
15

OP wants CSS only Solution! – dippas May 27 '16 at 16:50

Dan Chill · Answer 2 · 2016-05-27T16:47:36.017

1

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

edited May 27 '16 at 16:47

answered May 27 '16 at 16:46

Dan Chill

466
3
6

Thank you for the elaborated answer but its a pity you cant do this with CSS only. – Cain Nuke May 27 '16 at 16:47

dippas · Answer 3 · 2016-05-27T16:59:27.943

1

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>

`

edited May 27 '16 at 16:59

answered May 27 '16 at 16:48

dippas

58,591
15
114
126

score 0 · Answer 4 · answered May 27 '16 at 17:19

0

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.

answered May 27 '16 at 17:19

James Hamann

842
6
12

No, the container is way bigger: 135x35. The child covers only the right corner. – Cain Nuke May 28 '16 at 05:27

score 0 · Answer 5 · answered Sep 12 '17 at 07:53

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

Css hover child to trigger effect on parent

5 Answers5

Linked