Question

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 <a> tag.

<a id="log" href="#">text</a>
      <form id="form" action="" method="post">
            <input type="text" name="id"/>
            <input type="submit" name="submit"/>  
      </form>

Should css look something like this:

#form{
    opacity:0;
}
#log:hover ~ #form {
    opacity: 1;
}

or:

#log:hover + #form {
    opacity: 1;
}

It really drives me crazy :/ Any suggestions how I could make it work? I don’t want to use javaScript if there is other way.

Answer 1

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