CSS selector issues

Question

I am very bad with selectors, I am trying to figure out how to make a transition happen on my form when I hover over the "create one" link. Can anyone help me?

http://jsfiddle.net/LyZxG/

body:hover .form{}

the fiddle above shows all of my code, I currently have it transitioning from "body:hover" so you can see the transition.

Thanks in advance!

ps. I have ready every form about selectors and cant figure it out, I know its simple I'm just not getting it, thank you again.

Answer 1

OK with just css all you need to do is remove the

body:hover .form{}

add and in

.create-link:hover .form{
opacity:1.0;
    width:260px;
}

After you do that you will need to update your create link html to this

<li class="create-link">
    <a href="#">
    <h1 class="account-links">Create One</h1></a>
    <form class="form" action="demo_form.asp" method="get">
        First name: <input type="text" name="fname"><br>
        Last name: <input type="text" name="lname"><br>
        Password: <input type="text" name="pass">
        <input type="submit" value="Submit">
    </form>
</li>

Answer 2

Is this what you're looking for?

http://jsfiddle.net/HM82L/

jquery code

$(".create-link").hover(function(){
    $(".form").addClass("form-hover");
}, function(){
    $(".form").removeClass("form-hover");
});

and a little bit of CSS

.form{height:100px; transition:all .5s;}

.form-hover{
    height:300px;
}