這篇文章主要介紹jQuery中hover方法搭配css的hover選擇器怎么實現(xiàn)選中元素突出顯示方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目網(wǎng)站設計、成都網(wǎng)站建設網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元平武做網(wǎng)站,已為上家服務,為平武各地企業(yè)和個人服務,聯(lián)系電話:13518219792

今天做幫一個師姐做網(wǎng)頁遇到一個這樣的要求：

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

鼠標移動進表格，hover到的單元格透明度不變，沒hover到的單元格透明度改變。

先貼我已經(jīng)實現(xiàn)好的效果，一開始，表格透明度不變。

當我鼠標移動到第二排第三個單元格，其他單元格降低透明度。

解決方法

一開始，我用的是CSS實現(xiàn)方法,是下面這樣

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

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

后來我就用jQuery的hover方法，不過它總是選中了里面的所有單元格，這其中過程很曲折，我就不一一介紹了，我就講講我怎么實現(xiàn)的。

$('#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表示鼠標離開表格時

以上是“jQuery中hover方法搭配css的hover選擇器怎么實現(xiàn)選中元素突出顯示方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標題：jQuery中hover方法搭配css的hover選擇器怎么實現(xiàn)選中元素突出顯示方法
本文地址：http://chinadenli.net/article28/gicdcp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、商城網(wǎng)站、品牌網(wǎng)站建設、面包屑導航、App設計、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)