CSS选择器问题

我对选择器非常不满，我试图弄清楚当我将鼠标悬停在“创建一个”链接上时，如何在表单上进行转换。谁能帮我？CSS选择器问题

body:hover .form{}

上面的小提琴显示了所有我的代码，我现在有它转变“身体：悬停”所以你可以看到的过渡。

在此先感谢！

PS。我已经准备好了关于选择器的每一个表单，我不知道它的简单，我只是没有得到它，再次感谢你。

来源

2014-02-13 user2793657

与OK刚刚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>

来源

2014-02-13 18:39:45 mrdeleon

非常感谢！ – user2793657

你知道不透明的问题是，它只是不显示，但它在那里，所以基本上它会触发悬停时，当你移动你的鼠标链接应该是。更好地使用display：none来隐藏和显示：block来显示。 –

body .form风格的形式，：悬停（为了跨浏览器的支持）应该在标签上。否则将一个onHover事件附加到该元素并在其上抛出JavaScript。

来源

2014-02-13 18:19:22 VikingBlooded

这是你在找什么？

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

来源

2014-02-13 18:27:09 Mixin

我认为这是一个很好的解决方案。您将无法使用当前的html结构来完成此操作。 javascript/jQuery实现是你最好的选择。 – steinmas

OP在他们的页面上没有提到jQuery的使用，所以这个解决方案可能根本不适用。如果需要JavaScript解决方案，那么最好坚持使用vanilla JS，除非OP声明他们是或可以使用jQuery。如果仅仅为此而使用jQuery，那么在jQuery上使用jQuery也没有什么理由。 – ajp15243

有很多事情你的代码错误，但是这应该对现在的工作。

<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基础知识正确地首先设置你的菜单，然后进入过渡。一次只移动一步。

来源

2014-02-13 18:36:37

CSS选择器问题

回答

相关问题