CODEWITHSUNDEEP
htmlcsshoverparent-child
Cain Nuke
Cain Nuke

Reputation: 3103

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.

Upvotes: 1

Views: 4840

Answers (5)

ExteraDex
ExteraDex

Reputation: 21

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;
    }

ExteraDexenter image description here

Upvotes: 0

James Hamann
James Hamann

Reputation: 862

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.

Upvotes: 0

dippas
dippas

Reputation: 60573

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>

`

Upvotes: 1

Dan Chill
Dan Chill

Reputation: 466

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

Upvotes: 1

jNewbie
jNewbie

Reputation: 334

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?

Upvotes: 4

Related Questions