3

このjqueryコードを使用して、ホバー時にdivを表示しています:

$(function() {
  $('#div1').hover(function() { 
    $('#div2').fadeIn(); 
  }, function() { 
    $('#div2').fadeOut(); 
  });
});

jSFiddle: http://jsfiddle.net/4z2zq/4/

これは 2 つの DIV ID を使用します:

  1. div1
  2. div2

しかし、#div2ホバリングすると、それらのリンクをクリックできません! これらのリンクをクリックしようとすると、この div が消えます。#div2ホバリング中に保持するアイデア#div2。

4

6 に答える 6

2

そんな感じ

$(function() {
    $('#div1').hover(function() { 
        $('#div2').fadeIn(); 
    } );
    $('#div2').mouseleave(function() {                  
        $('#div2').fadeOut(); 
    });
});

http://jsfiddle.net/4z2zq/8/

于 2013-08-14T20:19:51.617 に答える
1

私にとって最善の方法は、HTML コードを変更することです。

<div id="div1">hover over me
    <ul id="div2">
        <li><a href='Google.com'>Google</a></li>
        <li><a href='Google.com'>Yahoo</a></li>
        <li><a href='Google.com'>AOl</a></li>
    </ul>
</div>
于 2013-08-14T20:22:31.437 に答える
1

div2の中にネストするだけですdiv1。

<div id="div1">hover over me
    <div id="div2">
        <ul>
            <li><a href='Google.com'>Google</a></li>
            <li><a href='Google.com'>Yahoo</a></li>
            <li><a href='Google.com'>AOl</a></li>
        </ul>
    </div>
</div>

上記は機能し、</div>1行目から最後に移動しただけです。div2の子になりますdiv1。

ここにあなたのフィドルのワーキングフォークがあります

于 2013-08-14T20:17:49.990 に答える
0

これには CSS 疑似関数を使用し、操作された要素を親 (#div1) 内に配置することをお勧めします。

#div2{
  display:none;
}

#div1:hover #div2 {
  display: block;
}

クロス ブラウザーの機能を制限する CSS 3 トランジションを使用しない限り、派手なトランジションはありません。

于 2014-01-29T10:33:49.893 に答える