1

ここに画像の説明を入力

ユーザーがウィンドウのサイズを変更すると、左側のメニュー項目が非表示になり、ユーザーが詳細リンクにカーソルを合わせると、上の画像に示すように、非表示のメニュー項目がツールチップに表示される Google+ のような機能を作成しようとしています。

私は半分終わった。ウィンドウのサイズ変更イベントをキャプチャし、隠しリスト項目 (li) を div に正常に追加しました。これが私のコードです：

<ul>
      <li><a href="#"><img alt="" src="../images/icons/home_active.png"> <em>Home</em></a></li>
      <li><a href="#"><img alt="" src="../images/icons/msg_active.png"> <em>Messages</em></a></li>
      <li><a href="#"><img alt="" src="../images/icons/reports_active.png"> <em>Reports</em></a></li>
      <li style="display: none;"><a href="#"><img alt="" src="../images/icons/mng_active.png"> <em>Manager</em></a></li>
      <li style="display: none;"><a href="#"><img alt="" src="../images/icons/shop_active.png"> <em>Shop</em></a> </li>
      <li class="mymore" style="display: block;"><a href="#"><img alt="" src="../images/icons/more_active.png"> <em>More</em></a> 
        <div id="mytooltip" style=""><a href="#"><img alt="" src="../images/icons/mng_active.png"> <em>Manager</em></a><a href="#"><img alt="" src="../images/icons/shop_active.png"> <em>Shop</em></a> </div>

      </li>
    </ul>

コードをよく見てください。非表示の li (style="diplay:none" を持つ li をチェック) を div id="mytooltip" に追加しました。しかし、li (クラス = mymore) にカーソルを合わせると、画像に示すように、div id="mytooltip" をツールチップとして表示したいと考えています。また、ユーザーがツールチップをホバリングしていない場合は、このツールチップを非表示にする必要もあります。これどうやってするの？

4

1 に答える 1

0

1 つのオプションは、「mymore」リンクでクラスをツールチップに追加して、可視性を有効にすることです。

jquery を使用すると、hover イベントを使用できます。以下の例では、「アクティブな」クラスをツールチップに追加しています。このアクティブなクラスは、表示をブロックに設定するだけです。

$(".mymore").hover(function () {
    $("#mytooltip").addClass("active"); //hover over
}, function () {
    $("#mytooltip").removeClass("active"); //hover out
});

編集: ユーザーが実際のツールチップにカーソルを合わせた場合、ツールチップを閉じたくないでしょう。これは、タイマーを使用して回避できます。たとえば、ユーザーが「mymore」ボタンからマウス アウトした場合、0.5 秒でボタンを閉じようとすることができます。タイマーが終了する前にユーザーが実際のツールチップにカーソルを合わせた場合は、単純にタイマーをクリアできます。

ToolTip = {
    interval: null,
    timer: 600,
    open: function () {
        clearTimeout(ToolTip.interval);
        $("#mytooltip").addClass("active");
    },
    close: function () {
        ToolTip.interval = setTimeout(function () {
            $("#mytooltip").removeClass("active");
        }, ToolTip.timer) //hover out
    }
}

$(".mymore, #mytooltip").hover(function () {
    ToolTip.open() //hover over
}, function () {
    ToolTip.close() //hover out
});

関連するフィドル: http://jsfiddle.net/J9WB7/

于 2013-03-10T01:51:02.047 に答える