jQuery中hover方法搭配css的hover選擇器,實現(xiàn)選中元素突出顯示方法
今天做幫一個師姐做網(wǎng)頁遇到一個這樣的要求:
鼠標(biāo)不移動進(jìn)表格,表格透明度不變。
鼠標(biāo)移動進(jìn)表格,hover到的單元格透明度不變,沒hover到的單元格透明度改變。
先貼我已經(jīng)實現(xiàn)好的效果,一開始,表格透明度不變。
當(dāng)我鼠標(biāo)移動到第二排第三個單元格,其他單元格降低透明度。
解決方法
一開始,我用的是CSS實現(xiàn)方法,是下面這樣
#table td{ opacity:0.5; } #table td:hover{ opacity:1; }
不過這樣一開始進(jìn)去的時候表格透明度就是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');
表示鼠標(biāo)移動進(jìn)去的時候,所有單元格透明度為0.5,然后
$('#content td:hover').css('opacity','1');
這里的css的hover選擇器表示選中單個單元格。
第二個funtion表示鼠標(biāo)離開表格時
以上這篇jQuery中hover方法搭配css的hover選擇器,實現(xiàn)選中元素突出顯示方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
初步認(rèn)識JavaScript函數(shù)庫jQuery
這篇文章主要介紹了JavaScript函數(shù)庫jQuery的一些基本概念,包括其的添加方法和最基本的使用示例,需要的朋友可以參考下2015-06-06jQuery 實時保存頁面動態(tài)添加的數(shù)據(jù)的示例
本篇文章主要介紹了jQuery 實時保存頁面動態(tài)添加的數(shù)據(jù)的示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08使用JQuery快速實現(xiàn)Tab的AJAX動態(tài)載入(實例講解)
這篇文章主要介紹了使用JQuery快速實現(xiàn)Tab的AJAX動態(tài)載入(實例講解)需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12jQuery的Ajax時無響應(yīng)數(shù)據(jù)的解決方法
今天做項目時發(fā)現(xiàn)永遠(yuǎn)響應(yīng)的值都是該頁面的html代碼。2010-05-05jQuery獲得頁面元素的絕對/相對位置即絕對X,Y坐標(biāo)
jQuery獲得頁面元素的絕對X,Y坐標(biāo),可以用offset()方法,下面有個不錯的坐標(biāo)大家可以參考下2014-03-03jQuery鼠標(biāo)移動圖片上實現(xiàn)放大效果
這篇文章主要介紹了jQuery鼠標(biāo)移動圖片上實現(xiàn)放大效果 ,需要的朋友可以參考下2017-06-06