jQuery中hover方法搭配css的hover選擇器,實現(xiàn)選中元素突出顯示方法
今天做幫一個師姐做網(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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
用Jquery重寫windows.alert方法實現(xiàn)思路
本文將介紹下用Jquery重寫windows.alert方法，已經(jīng)在 IE8 , firefox3.0.11下面測試通過，喜歡的朋友可以放心使用2013-04-04
這篇文章主要介紹了使用jquery動態(tài)加載js文件的方法,需要的朋友可以參考下2014-12-12
jquery attr方法獲取input的checked屬性問題
如果使用jquery,應(yīng)使用prop方法來獲取和設(shè)置checked屬性，不應(yīng)使用attr,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了分別用jQuery和CSS將背景圖片進行拉伸，讓它在頁面中隨著瀏覽器尺寸進行拉伸，就像我們的電腦桌面壁紙效果,需要的朋友可以參考下2015-10-10
jquery.fastLiveFilter.js實現(xiàn)輸入自動過濾的方法
這篇文章主要介紹了jquery.fastLiveFilter.js實現(xiàn)輸入自動過濾的方法,涉及jquery鼠標事件及字符串遍歷的相關(guān)技巧,簡單實用,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)影院選座訂座效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
jQuery中使用了document和window哪些屬性和方法小結(jié)
未列出常見的比如document.getElementById(),object.addEventListener()等。2011-09-09
如果您不希望下載并存放jQuery，那么也可以通過 CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）引用它，下面是具體實現(xiàn)，有類似需求的各位可以參考下哈，希望對你有所幫助2013-05-05
在最近項目中需要頻繁的右鍵菜單操作。我采用了contextMenu這款jQuery插件。2011-09-09
jquery+ajax實現(xiàn)省市區(qū)三級聯(lián)動效果簡單示例
這篇文章主要介紹了jquery+ajax實現(xiàn)省市區(qū)三級聯(lián)動效果,結(jié)合實例形式分析了jQuery結(jié)合ajax實現(xiàn)省市區(qū)三級聯(lián)動功能的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-01-01