2015-01-14 63 views
1

當我將鼠標懸停在表格中的某一行上時,將顯示圖像,並且當鼠標懸停在圖像上時,會顯示一個工具提示。 當我將鼠標放在工具提示中的選項上(即test1,test2)時,放置鼠標光標的選項應該突出顯示或更改其背景顏色,以讓用戶知道他們即將點擊的工具提示中的哪個選項。 請找到小提琴http://jsfiddle.net/0w9yo8x6/65/更改鼠標懸停在工具提示上的背景顏色

下面是示例JavaScript代碼:

$(function() { 
    var rowData; 
    $(document).tooltip({ 
     items: "img, [data-title]", 
     content: function() { 
      var element = $(this); 
      if (element.is("img")) 
      { 
       rowdata = element.attr("data-title"); 
       $(document).off('click', '#test'); 
       $(document).on('click', '#test', function() { 
        test(); 
       }); 


      } 

      return $(this).prop('title'); 
     }, 
     show: null, 
     close: function (event, ui) { 
      ui.tooltip.hover(

      function() { 
       $(this).stop(true).fadeTo(1000, 1); 
      }, 

      function() { 
       $(this).stop(true).fadeOut(200, function() { 
        $(this).remove(); 
       }) 
      }); 
     }, 
     position: { 
      my: "left", 
      at: "right" 
     } 
    }); 
}); 



$(function() { 
    $('.one').attr('title', $('.myTooltipTable').remove().html()); 
    $(document).tooltip(); 
}); 

回答

1

我認爲這是你要找的東西:你有http://jsfiddle.net/0w9yo8x6/66/

要小心時使用IDS以及何時使用類。

.toolTipHover:hover { 
    background-color:lightgray; 
} 

<table class="myTooltipTable" style="position:absolute;"> 
    <tr><td> <span id="test" class="toolTipHover">test1</span></td></tr> 
    <tr><td> <span id="test" class="toolTipHover">test2</span></td></tr> 
</table> 

在上面的html中,你會發現id =「test」有兩個不同的東西嗎?只有其中一個應該註冊(第一個),因爲在DOM上,id必須是唯一的。所以我實現了一個類toolTipHover並將CSS應用於該類。

我沒有觸及任何其他代碼,但我會建議您重新檢查您的代碼以確保id是唯一的,並且如果有多個元素需要相同的函數來應用,可能會添加一個類是最好的選擇。

1

您不需要編輯HTML並添加另一個類。

你只需要添加下面的代碼:

.ui-tooltip-content span:hover { 
    background-color:Orange; 
    transition:all 0.4s ease-in-out; 
} 

請參見下面的完整代碼:

$(function() { 
 
    var rowData; 
 
    $(document).tooltip({ 
 
     items: "img, [data-title]", 
 
     content: function() { 
 
      var element = $(this); 
 
      if (element.is("img")) 
 
      { 
 
       rowdata = element.attr("data-title"); 
 
       $(document).off('click', '#test'); 
 
       $(document).on('click', '#test', function() { 
 
        test(); 
 
       }); 
 
        
 
    
 
      } 
 
      
 
      return $(this).prop('title'); 
 
     }, 
 
     show: null, 
 
     close: function (event, ui) { 
 
      ui.tooltip.hover(
 

 
      function() { 
 
       $(this).stop(true).fadeTo(1000, 1); 
 
      }, 
 

 
      function() { 
 
       $(this).stop(true).fadeOut(200, function() { 
 
        $(this).remove(); 
 
       }) 
 
      }); 
 
     }, 
 
     position: { 
 
      my: "left", 
 
      at: "right" 
 
     } 
 
    }); 
 
}); 
 

 

 

 
$(function() { 
 
    $('.one').attr('title', $('.myTooltipTable').remove().html()); 
 
    $(document).tooltip(); 
 
});
td.myData > img { 
 
    display: none; 
 
    float:right; 
 
    height: 19px; 
 
} 
 
td.myData:hover > img { 
 
    display: inline-block; 
 
} 
 
.ui-tooltip-content span { 
 
    transition:all 0.4s ease-in-out; 
 
} 
 

 
.ui-tooltip-content span:hover { 
 
    background-color:Orange; 
 
    transition:all 0.4s ease-in-out; 
 
}
<script> 
 
     function test(){ 
 
    \t alert("test invoked"); 
 
    
 
    } 
 
    
 

 
</script> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" /> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> 
 

 
<table class="myTooltipTable" style="position:absolute;"> 
 
    <tr><td> <span id="test" >test1</span></td></tr> 
 
    <tr><td> <span id="test" >test2</span></td></tr> 
 
</table> 
 

 
<br/><br><br> 
 
<table border="1"> 
 
<tr> 
 
<td class="myData">Data1 <img class="one" id="one" data-title="Data1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" /> 
 
<img class="two" id="two" src="https://www.webkit.org/blog-files/acid3-100.png" width="15" height="15" style="visibility:hidden;"/> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td class="myData">Data2 <img class="one" id="one" data-title="Data2" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" /> 
 
<img class="two" id="two" src="https://www.webkit.org/blog-files/acid3-100.png" width="15" height="15" style="visibility:hidden;"/> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td class="myData">Data3 <img class="one" id="one" data-title="Data3" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" /> 
 
<img class="two" id="two" src="https://www.webkit.org/blog-files/acid3-100.png" width="15" height="15" style="visibility:hidden;"/> 
 
</td> 
 
</tr> 
 
</table>

您colud通過把一個簡單 CSS懸停效果實現這一目標
相關問題