Question

我对选择器非常不满意，当我将鼠标悬停在“创建一个”链接上时，我试图弄清楚如何在我的表单上进行转换。任何人都可以帮助我吗？

body:hover .form{}

上面的小提示显示了我的所有代码，我目前正在从“body：hover”转换，以便您可以看到转换。

提前致谢！

PS。我已准备好关于选择器的每一种形式，并且无法弄明白，我知道它很简单，我只是没有得到它，再次感谢你。

Answer 1

单击css即可，只需删除

即可

body:hover .form{}

添加和

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

执行此操作后，您需要将创建链接html更新为此

<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

这是你要找的吗？

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

Answer 3

您的代码存在许多问题，但这应该适用于此。

<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基础知识，先正确设置菜单然后进入转换状态。只需一步一步。

Answer 4

body。表单样式，：hover（为了跨浏览器支持）应该在标签上。否则将onHover事件附加到元素并向其抛出javascript。

CSS选择器问题

4 个答案: