4

cssには、上の他の要素を変更する可能性が含まれていますかhover。私はちょっと簡単な仕事に苦労しているからです。この例では、formホバーしたときに表示したいと思います<a> tag。

<a id="log" href="#">text</a>
      <form id="form" action="" method="post">
            <input type="text" name="id"/>
            <input type="submit" name="submit"/>  
      </form>

cssは次のようになります。

#form{
    opacity:0;
}
#log:hover ~ #form {
    opacity: 1;
}

また：

#log:hover + #form {
    opacity: 1;
}

それは本当に私を夢中にさせます：/私がそれを機能させる方法について何か提案はありますか？他の方法がある場合は、javaScriptを使用したくありません。

4

2 に答える 2

8 
#form {
  display: none;
}

#log:hover ~ #form {
  display:block;
}

#form:hover {
  display:block;
}

リンクのホバーを停止したときにフォームが消えないようにする必要があり#form:hoverますが、タッチデバイスを使用している場合は機能しません。#log:active ~ #formタッチで動作する可能性があり、現在確認できません。

例： http： //jsbin.com/etuxab/1/edit

于 2012-10-22T14:23:25.940 に答える
5

次のように書いてください-

#form{
    opacity:0;
    filter:alpha(opacity=0); /*For IE8*/
}

#log:hover ~ #form {
    opacity: 1;
    filter:alpha(opacity=100); /*For IE8*/
}

作業デモ

于 2012-10-22T14:20:39.917 に答える