懸停狀態依然存在，直到其他東西懸停爲止

我想創建一個懸停工具提示，它顯示了跨度內的內容並保持到另一個元素懸停爲止。懸停狀態依然存在，直到其他東西懸停爲止

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>

這是Jquery的我到目前爲止，

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

它設置爲顯示：無默認，當該類被添加它的顯示：塊。我需要幫助的部分是，即使在mouseout +之前，該類仍然保留，直到鼠標懸停爲止。

非常感謝，任何幫助將不勝感激。

來源

2012-03-15 sarah3585

你有試過什麼嗎？或者可能在查詢之前進行搜索？ http://stackoverflow.com/questions/1333546/how-can-i-display-a-tooltip-message-on-hover-using-jquery – 2012-03-15 15:37:07

嘗試用.mouseover（）和.mouseout（）觸發您的工具提示以刪除/隱藏工具提示http://api.jquery.com/mouseover/ – QQping 2012-03-15 15:37:28

我已經儘可能在懸停上添加一個類。我的jquery是非常非常基本的，我不明白如何調整來自其他線程的代碼爲我工作。（'selected'）; $（this）.removeClass（'selected'）; }）; – sarah3585 2012-03-15 15:45:56

在您的mouseover上選擇showinfo-class，並刪除該類。

之後，將showinfo應用於您的展開元素。對你來說應該沒有問題。

這樣，類將保留在該元素上，直到其他元素被佔用。

實現：

$('.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 2012-03-15 16:34:28

這沒問題，我編輯我的答案給你一些實施提示。 – Christoph 2012-03-15 16:42:40

非常感謝您花時間編寫它，但它不會刪除之前添加到其他元素的showinfo類。 – sarah3585 2012-03-15 16:53:55

reffering發表 'psychotik' 的答案後， 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中使用「標題」元素？ – sarah3585 2012-03-15 16:41:37

沒有。沒有必要在html中添加標題元素。 .attr（）將'title'屬性添加到您懸停的div上。你有沒有嘗試上面的代碼？ – 2012-03-15 18:35:43

有了下面的解決方案，我希望你的問題就解決了..

<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

懸停狀態依然存在，直到其他東西懸停爲止

回答

相關問題