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選擇器問題

回答

相關問題