欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery中hover方法搭配css的hover選擇器,實(shí)現(xiàn)選中元素突出顯示方法

 更新時(shí)間：2017年05月08日 08:04:15   投稿：jingxian  
下面小編就為大家?guī)?lái)一篇jQuery中hover方法搭配css的hover選擇器,實(shí)現(xiàn)選中元素突出顯示方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

今天做幫一個(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í)

以上這篇jQuery中hover方法搭配css的hover選擇器,實(shí)現(xiàn)選中元素突出顯示方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論