0

わかりましたので、古いツールチップ関数に少しバリエーションがあります。同様のことを実現したいと思いますが、マウスがツールチップ div を追跡し、そこに含まれるコンテンツのリンクをクリックできるようにします。おそらく最良の説明ではないので、私の言いたいことをお見せしましょう。http://www.hsbc.co.ukを見てください。特に、上部の灰色のグラデーション バーです。「毎日の銀行取引」セクションにマウスを合わせると、下に表示される濃い灰色のボックスにたどり着くことができます。これを達成するにはどうすればよいですか？これまでの私のコードは次のとおりです。

<ul>
  <li>
    <a href="#" id="hover">
      <h2>Garage Search</h2>
      <span>Find yourself a garage</span>
    </a>
  </li>
</ul>

<div id="content">
  Content of popup div goes here
</div>

$(document).ready(function() {
  $("#hover").hover(function() {
    $("#content").show();        
  }, function() {
    $("#content").hide();
  });        
});

明らかに、現在の状態ではツールチップ タイプのスクリプトとして正常に動作しますが、onmouseout イベントがトリガーされるため、ポップアップにマウス ダウンすることはできません。

4

2 に答える 2

1

入れる#content_#hover 

<ul>
  <li id="hover">
    <a href="#">
      <h2>Garage Search</h2>
      <span>Find yourself a garage</span>
      <div id="content">
      Content of popup div goes here
      </div>
    </a>
  </li>
</ul>

そのようにして、あなたはまだホバリングして#hoverいる間- 私#content は id hover を に変更しました.<li><span><h2><div><a>

于 2012-11-14T21:33:00.663 に答える
0

また、コンテンツアイテムにクラスを追加することもできます

$(document).ready(function(){
    $("#hover").hover(function(){
        $(this).addClass("current").fadeIn();
    }, function() {
        $(this).removeClass("current").stop(true, true).css("display", "none");
    });
)};
于 2012-11-14T21:35:40.187 に答える