CODEWITHSUNDEEP
csscss-selectors
user2793657
user2793657

Reputation: 83

CSS selector issues

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.

Upvotes: 3

Views: 89

Answers (4)

mrdeleon
mrdeleon

Reputation: 645

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>

Upvotes: 2

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

There are a lot of things wrong with your code but this should work for right now.

<div class="content">
    <header></header>
    <nav>
        <ul>    <a href="#"><li class="nav-box-home"><h1>Home</h1></li></a>

            <li class="nav-box-account"><a href="#"><h1>Account</h1></a>

                <ul>
                    <li><a href="#"><h1 class="account-links">My Account</h1></a>
                    </li>
                    <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>
                </ul>
                <li class="nav-box-time"><a href="#"><h1>Time-Saver</h1></a>
                </li>
        </ul>
    </nav>
    <section>
        <article>
                <h1>blah</h1>

                <h1>blah</h1>

                <h1>blah</h1>

                <h1>blah</h1>

        </article>
    </section>
    <section></section>
    <footer></footer>
</div>

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

FIDDLE

NOTE: My advice would be to get into css basics to properly set your menu first and then get into transitions. Just move 1 step at a time.

Upvotes: 1

Mixin
Mixin

Reputation: 81

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

Upvotes: 1

VikingBlooded
VikingBlooded

Reputation: 859

body .form to style the form, :hover (for the sake of cross browser support) should be on tags. otherwise attach an onHover event to the element and throw javascript at it.

Upvotes: 0

Related Questions