懸停效果jQuery

我有一堆李元素，我想在顏色中使用賠率和平均值進行交替，然後基於鼠標懸停進行高亮顯示。爲了不突出顯示我需要跟蹤顏色曾經是奇數還是偶數。爲了在應用高亮顏色時執行此操作，我首先爲其設置了任意屬性。這樣做有什麼缺點嗎？有沒有更好的辦法？這裏是代碼：懸停效果jQuery

<script type="text/javascript"> 
var init = function(event){ 
$("li:odd").css({'background-color' : '#eeeeee', 'font-weight' : 'bold'}); 
$("li:even").css('background-color', '#cccccc'); 
    //initial colors setup 

    $("li").hover(
    function() //hover over 
    { 
     var current = $(this); 
     current.attr('old-background', current.css('background-color')); 
     current.css('background-color', '#ffee99'); 

    } 
    , function() //hover out 
{ 
    var current = $(this); 
    current.css('background-color', current.attr('old-background')); 
}) 

} 
$(document).ready(init); 
</script>

那麼有沒有更好的方法來做到這一點？

來源

2009-07-14 Ori

你應該使用addClass和removeClass來實現這一點，而不是直接操縱CSS。

<style> 
    li.hover { 
    background-color: #ffee99 !important; 
    } 
</style> 

<script type="text/javascript"> 
    var init = function(event){ 
    $("li:odd").css({'background-color' : '#eeeeee', 'font-weight' : 'bold'}); 
    $("li:even").css('background-color', '#cccccc'); 
    //initial colors setup 

    $("li").hover(
     function() //hover over 
     { 
     $(this).addClass('hover'); 

     } 
     , function() //hover out 
     { 
     $(this).removeClass('hover'); 
     }) 
    } 
    $(document).ready(init);

來源

2009-07-14 00:06:37 benlumley

這是一個比較好的做法，確實是 – 2009-07-14 00:08:09

類的奇數和偶數在其他答案中也是一個好主意。 – benlumley 2009-07-14 05:45:50

我benlumley一個綠色，你應該使用addClass/removeClass方法。

你的CSS可能看起來像，

li { 
    font-weight: bold; 
} 

li.odd { 
    background-color: '#eee'; 
} 

li.even { 
    background-color : '#ccc'; 
} 

li.hover { 
    background-color : '#ffee99'; 
}

你的初始化函數會是這個樣子，

var init = function(event) 
{ 
    $('li:odd').addClass('odd'); 
    $('li:odd').addClass('even'); 

    $('li').hover( function() 
        { 
         $(this).addClass('hover'); 
        }, 
        function() 
        { 
         $(this).removeClass('hover'); 
        } 
        ); 

}

此代碼有優勢，如果你想改變這些列表項的外觀造型，你可以去你的CSS代碼並改變顏色而不用接觸你的JS代碼！

來源

2009-07-14 00:13:45 SolutionYogi

如果您已添加單數和雙數班級，則不需要JavaScript代碼進行懸停。懸停可以在CSS中完成。 – Nosredna 2009-07-14 00:20:08

您可以引入一個名爲highlighted的CSS類，並調用current.addClass('highlighted')來添加懸停在上的空格，並且current.removeClass('highlighted')可以刪除懸停在外的類。我假設你也在你的CSS文件中添加奇數和偶數類。

<script type="text/javascript"> 
var init = function(event){ 
    //initial colors setup 
    $("li:odd").addClass('odd'); 
    $("li:even").addClass('even'); 

    $("li").hover(
     function() //hover over 
     { 
       $(this).addClass('highlighted'); 

     } 
     , function() //hover out 
     { 
       $(this).removeClass('highlighted'); 
     }) 

} 
$(document).ready(init); 
</script>

highlighted後應even和odd班在您的文件，以便能夠覆蓋默認的顏色聲明。

來源

2009-07-14 00:14:19 Energiequant

像其他喲也可以使用

$("li:odd").toggleClass("odd");

或

$("li:even").toggleClass("odd");

，如果你想改變的第一個項目的顏色。（也可以先用我的想法）

來源

2010-05-20 19:18:38 darkporn

懸停效果jQuery

回答

相關問題