jQuery中hover方法實(shí)現(xiàn)選中元素突出顯示

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

鼠標(biāo)不移動(dòng)進(jìn)表格，表格透明度不變。

鼠標(biāo)移動(dòng)進(jìn)表格，hover到的單元格透明度不變，沒(méi)hover到的單元格透明度改變。

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

當(dāng)我鼠標(biāo)移動(dòng)到第二排第三個(gè)單元格，其他單元格降低透明度。

解決方法

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

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

不過(guò)這樣一開(kāi)始進(jìn)去的時(shí)候表格透明度就是0.5，看起來(lái)很不好。

后來(lái)我就用jQuery的hover方法，不過(guò)它總是選中了里面的所有單元格，這其中過(guò)程很曲折，我就不一一介紹了，我就講講我怎么實(shí)現(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名，可以看到我們對(duì)單元格hover方法里面加了兩個(gè)function

第一個(gè)funtion移動(dòng)到表格時(shí)，首席

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

表示鼠標(biāo)移動(dòng)進(jìn)去的時(shí)候，所有單元格透明度為0.5，然后

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

這里的css的hover選擇器表示選中單個(gè)單元格。

第二個(gè)funtion表示鼠標(biāo)離開(kāi)表格時(shí)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com