jQuery中hover方法實作選取元素突出顯示

本文主要為大家帶來一篇jQuery中hover方法搭配css的hover選擇器,實作選取元素突出顯示方法。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

今天做幫一個師姐做網頁遇到這樣的要求：

#滑鼠不移動進表格，表格透明度不變。

滑鼠移動進表格，hover到的儲存格透明度不變，沒hover到的儲存格透明度改變。

先貼我已經達成好的效果，一開始，表格透明度不變。

當我滑鼠移到第二排第三個儲存格，其他儲存格降低透明度。

解決方法

#一開始，我用的是CSS實作方法,是下面這樣

#table td{
 opacity:0.5;
}
#table td:hover{
 opacity:1;
}

不過這樣一開始進去的時候表格透明度就是0.5，看起來很不好。

後來我就用jQuery的hover方法，不過它總是選中了裡面的所有單元格，這其中過程很曲折，我就不一一介紹了，我就講講我怎麼實現的。

$('#content td').hover(
  function(){
   $('#content td').css('opacity','0.5');
   $('#content td:hover').css('opacity','1');
   },
  function(){
   $('#content td').css('opacity','1');
  });

content是我table的id名，可以看到我們在單元格hover方法裡面加了兩個function

第一個funtion移動到表格時，首席

$('#content td').css('opacity','1');

表示滑鼠移動進去的時候，所有儲存格透明度為0.5，然後

$('#content td:hover').css('opacity','1');

這裡的css的hover選擇器表示選取單一單元格。

第二個funtion表示滑鼠離開表格時

相關推薦：

#hover的用法實例總結

## CSS中hover選擇器的使用詳解

jQuery中關於​​hover與點擊事件之間的衝突詳解（圖）

以上是jQuery中hover方法實作選取元素突出顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！