1

divのホバーに表示される絶対位置がありaます。top:0; left:0アンカー（ ）のベースに絶対に配置されているので、ユーザーがdivを非表示にせずにアンカーからdivに移動できるようにしたいと思います。

実際、私はJQueryコードの一部を準備しましたが、divをホバーに表示させることしかできませんでした。アンカーからdivに移動すると、後者は明らかに隠されています。JSFiddleを見て、私が何をしたかを確認してください。

前もって感謝します。

4

3 に答える 3

2

リンクでdivをラップする必要があります。このようにdivをホバーすると、リンクが親であるため、リンクをホバーしていると認識されます。

<a>
    Hover Me!
    <div>Hidden Message.</div>
</a>

このタスクにはJavaScriptはまったく必要ありません。

私のフィドルをちょっと待ってください。ここにあります：http：//jsfiddle.net/xwder/1/

または、リンク内に子がないように、aと両方を別のコンテナでラップすることもできます。divそのためのアレックスの答えをチェックしてください。

于 2012-09-24T19:00:41.430 に答える
2

まず第一に、javascript を使用してすべてを複雑にしすぎています。この場合、親コンテナーを使用してホバー アクションを処理できるため、必要ありません。

私は個人的に次のようにします：http://jsfiddle.net/qLUf9/

<div class="hover_container">
    <a class="button">Click Me</a>
    <div class="container">
       This is my hover content.
    </div>
</div>

そしてCSS：

a.button {
 background-color: blue;
 color: #fff;
}

.hover_container {
 position: relative:  
}

.hover_container .container {
 display: none;
 border: 1px solid #000;
 float: left;
 position: absolute;
 left: 0;
 top: 20px;
}

.hover_container:hover .container {
 display: block;
}

注意::hover IE6 はブロック要素の属性をサポートしていません。hoveredIE6 以下では、基本的な JavaScript を使用して、その要素などにクラスを追加する必要があります。IE6 ホバー バグの修正について詳しくは、http: //robspangler.com/blog/hover-pseudo-class-bug-fix-for-ie6/をご覧ください。

于 2012-09-24T19:13:00.420 に答える
0

これを試して。コードをあまり変更せずに、必要なことを行うと思います。:)

フィドルへのリンク

于 2012-09-24T19:10:02.253 に答える