Geek asks and answers

CSS selector issues

I feel really bad with selectors, I’m trying to figure out how to make the transition in my form when I clicked on the “create one” link. Can anybody help me?

http://jsfiddle.net/LyZxG/

body:hover .form{}

the script above shows all my code, I am currently transitioning from "body: hover" so you can see the transition.

Thanks in advance!

ps. I am ready for every form about selectors and I can’t understand it, I know that it’s simple, I just don’t understand, thanks again.

+3
source share
4 answers

OK with just css all you have to do is delete

body:hover .form{}

add and in

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

After that you will need to update the html creation link on 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>
+2
source

Is this what you are looking for?

http://jsfiddle.net/HM82L/

jquery

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

CSS

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

.form-hover{
    height:300px;
}
+1

, .

<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

.. CSS, , . 1 .

+1

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

0
source

More articles:


All Articles