CSS选择器问题

我对选择器的使用非常糟糕，当我将鼠标悬停在“创建一个”链接上时，我试图找出如何在我的表单上进行转换。有人能帮我吗

上面的提琴显示了我所有的代码，我现在让它从“body:hover”转换过来，所以你可以看到转换

提前谢谢

---

另外，我已经准备好了关于选择器的每一个表单，但我想不出来，我知道它很简单，我只是不明白，再次感谢。

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

这就是您想要的吗

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

---

你的代码有很多错误，但现在应该可以用了

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

名字：

姓氏：

密码：






注意：我的建议是先进入css基础，正确设置菜单，然后进入过渡。只需一次移动一个步骤。
只需使用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>


名字：

姓氏：

密码：

我认为这是一个很好的解决方案。您将无法使用当前的html结构执行此操作。javascript/jquery实现是您最好的选择。OP在他们的页面上没有提到jquery的任何用法，所以这个解决方案可能根本不适用。如果需要一个JavaScript解决方案，那么最好坚持使用vanilla JS，除非OP另外声明它们是或可以使用jQuery。如果jQuery仅用于此目的，那么也没有什么理由在vanilla JS上使用jQuery。你知道不透明度的问题是它不显示，但它在那里，所以当你将鼠标移动到链接应该在的位置时，它基本上会触发悬停。最好使用display:none进行隐藏，使用display:block进行显示。
<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>