Skip to content Skip to sidebar Skip to footer

Can Pure Css Change Other Element On Hover If Its Not Child Element?

Does css include possibility to change other element on hover. Because I'm kinda struggling with simple task. For this example, I want form to appear when you hover tag.

Solution 1:

#form {
  display: none;
}

#log:hover ~ #form {
  display:block;
}

#form:hover {
  display:block;
}

You'll need #form:hover so that the form doesn't disappear when you stop hovering the link, but this will not work if you're on a touch device. #log:active ~ #form may work on touch, can't confirm right now.

e.g: http://jsbin.com/etuxab/1/edit

Solution 2:

Write it as -

#form{
    opacity:0;
    filter:alpha(opacity=0); /*For IE8*/
}

#log:hover ~ #form {
    opacity: 1;
    filter:alpha(opacity=100); /*For IE8*/
}

Working Demo

Post a Comment for "Can Pure Css Change Other Element On Hover If Its Not Child Element?"