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. jNewbie 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? This is not possible with just CSS. You might try using