使用變量jQuery CSS懸停

如何使用jQuery將先前捕獲的變量傳遞到背景屬性？我正在處理一個非常大的表格，大量的單元格和大量的數據。有多種顏色被使用，被應用到表格而不是單元格（有很好的理由）。使用變量jQuery CSS懸停

這裏是我的代碼（大大濃縮HTML）

<table> 
    <tr> 
     <td class="nonLevel"><ul class="list"><li>text to go here</li></ul></td> 
     <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td> 
     <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></td> 
     <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td> 
     <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td> 
     <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td> 
    </tr> 
</table> 


$(".block").hover(function() { 
    var myColor = $(this).css("background-color"); 

    $(this).css({'background-color' : 'yellow'}); 
    }, function() { 
     var cssObj = { 
      'background-color' : myColor, 
     } 
     $(this).css(cssObj); 
    });

所以我試圖捕捉側翻原來的顏色（當我通過myColor可變進警報其中工程），然後更改顏色變爲黃色，然後在展開後切換回「myColor」。

我看過addClasss和removeClass，但他們似乎並沒有削減它的設置方式。同樣，背景顏色是在CSS中設置的，而不是單元格，這是不能改變的。

來源

2010-11-22 Keith

您的這條線後缺少分號`變種cssObj = { 「背景顏色」：myColor， }' – 2010-11-22 14:47:28

另外，'cssObj`結尾的逗號會使IE崩潰。 – 2010-11-22 14:55:37

你並不需要存儲背景顏色 - 甚至是使用JavaScript/jQuery。您只需可以使用CSS：

.block:hover { 
    background-color: yellow; 
}

如果你有使用JavaScript（例如，因爲你需要支持IE6），只需設置背景色爲空：

$(".block").hover(function() { 
    $(this).css("background-color", "yellow"); 
}, function() { 
    $(this).css("background-color", ""); 
});

如果你還是覺得你需要存儲的顏色，使用jQuerys數據功能：

$(".block").hover(function() { 
    $(this).data("background-color", $(this).css("background-color")); 
    $(this).css("background-color", "yellow"); 
}, function() { 
    $(this).css("background-color", $(this).data("background-color")); 
});

來源

2010-11-22 14:56:39 RoToRa

你可以充塞現有的顏色爲數據屬性：

$(".block").hover(function() { 
    $(this).data("bkg",$(this).css("background-color")); 
    $(this).css('background-color', 'yellow'); 
}, function() { 
    $(this).css("background-color", $(this).data("bkg")); 
});

來源

2010-11-22 14:50:10 Keltex

謝謝馬特。你是對的。 – Keltex 2010-11-22 14:53:21

雖然有效，除非有其他建議嗎？ – Keith 2010-11-22 14:55:40

我相信你已經申報了jQuery調用的外部您myColor變量。否則，它應該是一個局部變量，這意味着它將在handlerOut上第二次調用懸停之前超出範圍。

來源

2010-11-22 14:50:18

來處理這個問題，特別是如果你的表是大最好的方法，就是用.live()和.data() 。

$('.block').live('mouseover mouseout', function(event) { 
    var $this = $(this); 
    if (event.type === 'mouseover') { 
     var myColor = $this.css('background-color'); 
     $this.data('myColor', myColor); 
     $this.css('background-color': 'yellow'); 
    } else { 
     $this.css('background-color', $this.data('myColor')); 
    } 
});

Hot demo action →

來源

2010-11-22 14:58:59

你也可以使用jQuery數據存儲原來的顏色。然後在mouseout上獲取它。

$(".block").each(function (index, elem) { 
    $(elem).data('orginalColor', $(elem).css("background-color")) 
}).hover(function() { 
    $(this).css({'background-color' : 'yellow'}); 
}, function() { 
    $(this).css({'background-color' : $(this).data('orginalColor')}); 
});

你可以閱讀有關jQuery的數據在這裏：jQuery Data

而且我會建議使用委託，而不是（jQuery使用它內部在某些情況下你）。此綁定只有一個事件處理程序整個表而不是一個用於每個「TD」

$('.block').each(function (index, elem) { //code }); 
$('table').delegate('td', 'mouseover', function() { //code }); 
$('table').delegate('td', 'mouseout', function() { //code });

..fredrik

來源

2010-11-22 14:59:30 fredrik

使用變量jQuery CSS懸停

回答

相關問題