何か他のものがホバリングされるまでホバー状態が残っています

スパンの内側に何が表示されているかを示すホバーツールチップを作成したいと思います。デフォルトとしてnoneとそのクラスが追加されるとき、それはディスプレイがあります：ブロック何か他のものがホバリングされるまでホバー状態が残っています

HTML

 <div class="man"> 
     <div class="parts"> 
      <div class="cc-head"><a href="#"><span>Text Head</span></a></div> 
      <div class="cc-neck"><a href="#"><span>Text Neck</span></a></div> 
     </div> 
     </div>

これは

$(document).ready(function() { 
    $('.parts div a').mouseover(function() { 
     $(this).addClass('showinfo'); 
    }); 
});

はそれは表示に設定されていないですが、私がこれまで持っているjQueryのです。私が助けが必要な部分は、何か他のものがマウスオーバーされるまで、クラスをmouseout +上に残しておくことです。

多くのおかげで、どんな助けも大歓迎です。

出典

2012-03-15 sarah3585

試しましたか？または尋ねる前にSOを検索することができますか？ http://stackoverflow.com/questions/1333546/how-can-i-display-a-tooltip-message-on-hover-using-jquery –

.mouseover（）および.mouseout（）を使用してツールチップをトリガーしようとします。ツールチップを削除/隠します。http://api.jquery.com/mouseover/ – QQping

私は、ホバー上にクラスを追加することができます。私のJqueryは非常に基本的なので、他のスレッドのコードをどのように調整して私のために働くのか分かりません。 $（ '。parts a span'）。mouseover（function（）{ $（this）.addClass（ 'selected'）; $（this）.removeClass（ 'selected'）; }）; – sarah3585

mouseover（存在する場合）要素をshowinfo -classで選択し、クラスを削除します。

その後、ホバリングされた要素にshowinfoを適用します。あなたには問題ありません。

このようにして、クラスは他の要素がぶらされるまでその要素に残ります。

実装：

'psychotik' で投稿答えをreffering後

$('.parts div a').mouseover(function() { 
     // remove Class if there is an element with class already applied 
     $('.showinfo').removeClass('showinfo'); 
     // Apply your class to this 
     $(this).addClass('showinfo'); 
    });

出典

2012-03-15 16:30:04 Christoph

これは、別の要素にマウスオーバーするようになっても機能しますか？ – sarah3585

これは問題ありません、私はあなたにいくつかの実装のヒントを与えるために私の答えを編集します。 – Christoph

それを書く時間をとってくれてありがとうございましたが、前の要素が別の要素に追加されたときにshowinfoクラスを削除していません。 – sarah3585

は、How can I display a tooltip message on hover using jQuery?

は、私は以下のソリューションで十分だと思いますあなたのニーズ。それがあなたを助けることを願ってください。

ソリューション：

jQueryのスクリプト：

 $(document).ready(function(){ 

      $(".cc-head").hover(function(){ 
       $(this).attr('title',$(this).children().children().html()); 
      }); 

     });

HTML：

<div class="man"> 
     <div class="parts"> 
      <div class="cc-head"><a href="#"><span>Text Head</span></a></div> 
      <div class="cc-head"><a href="#"><span>Text Neck</span></a></div> 
     </div> 
    </div>

出典

2012-03-15 16:34:16

これはhtmlで使用するには 'title'要素が必要ですか？ – sarah3585

番号。 htmlにtitle要素を追加する必要はありません。 .attr（）は、あなたがカーソルを置いたdivに 'title'属性を追加します。あなたは上記のコードを試しましたか？ –

以下のソリューションでは、私はあなたの問題が解決されて願っています。..

<html> 

    <head> 

    <style type="text/css"> 

     .tooltip 
     { 
      position:absolute; 

      border:1px solid gray; 
      border-radius: 3px; 

      background-color:rgba(0,0,0,0.2); 
      padding:5px; 

      color:white; 
      font-size: 12px; 
     } 

    </style> 

    <script type="text/javascript" src="jquery.js"></script> 

    <script type="text/javascript" > 

     $(document).ready(function(){ 

      $(".cc-head").hover(function(){ 

       var tooltip_text = $(this).children().children().html(); //contains the data present inside 'span' element 

       $('<p class="tooltip"></p>').html(tooltip_text).appendTo('body').fadeIn('slow'); //showing the tooltip 

      }, function() { // remove the tooltip as soon as it goes outside the div 

       $('.tooltip').remove(); 

      }).mousemove(function(e) { 

       var x_pos = e.pageX + 15; //calculating the position of tooltip from x-axis, pageX gives the current position of mouse pointer from x-axis 
       var y_pos = e.pageY + 10; //calculating the position of tooltip from y-axis, pageY gives the current position of mouse pointer from y-axis 

       // assigning the css to .tooltip 
       $('.tooltip').css('left',x_pos); 
       $('.tooltip').css('top',y_pos); 

     }); 

     }); 

    </script> 

</head> 

<body> 

    <div class="man"> 

     <div class="parts"> 

      <div class="cc-head"><a href="#"><span>Text Head</span></a></div> 
      <div class="cc-head"><a href="#"><span>Text Neck</span></a></div> 

     </div> 
    </div> 

</body> 

</html>

出典

2012-03-15 19:41:08

何か他のものがホバリングされるまでホバー状態が残っています

答えて

関連する問題