jQuery的交替行的顏色似乎並不懸停功能

我用下面的語句的jQuery工作後，jQuery的交替行的顏色似乎並不懸停功能

$(".resultsdiv:odd").css("background-color", "#fff"); 
$(".resultsdiv:even").css("background-color", "#EFF1F1"); 
$('.resultsdiv').hover(function() { 
     $(this).css('background-color', '#f4f2f2'); 
    }, 
    function() { 
     $(this).css('background-color', '#fff'); 
});

替代似乎是確定在初期，將鼠標懸停在一個div元素之後，在沒有工作.. 。任何建議...

來源

2010-03-23 Chendur Pandian

我的建議是不要直接操作風格，使用類。所以CSS：

.resultsdiv { background-color: #FFF; } 
.resultseven { background-color: #EFF1f1; } 
.resultshover { background-color: #F4F2F2; }

有：

$(".resultsdiv:even").addClass("resultseven"); 
$(".resultsdiv").hover(function() { 
    $(this).addClass("resultshover"); 
}, function() { 
    $(this).removeClass("resultshover"); 
});

與像一個電話的問題：

$(this).css("background", "#FFF");

是，你有沒有辦法知道如何元件復位到其原始狀態的方式因爲它的原始顏色也可能被設置爲內聯樣式，就像代碼示例中的情況一樣。類只是使這種問題變得容易得多。

來源

2010-03-23 09:57:29 cletus

@Cletus如何將類名添加到這些 – 2010-03-23 09:58:10

$（'＃element'）。addClass（'ClassName'）; – Fermin 2010-03-23 09:59:15

@cletus工作... – 2010-03-23 10:04:37

當您將鼠標移出時，將該行的顏色設置爲#fff，對於奇數行，這看起來很好，但不是偶數。

在鼠標懸停時，您需要檢查它是奇數還是偶數，並相應地設置顏色。

來源

2010-03-23 09:58:46 Fermin

@Fermin如何做到這一點？ – 2010-03-23 09:59:12

<style type="text/css"> 
    .resultsdiv.odd { background-color: #fff } 
    .resultsdiv.even { background-color: #EFF1F1 } 
    .resultsdiv.highlight { background-color: #f4f2f2 } 
</style> 

<script type="text/javascript"> 
$(function(){ 
    $(".resultsdiv:odd").addClass('odd'); 
    $(".resultsdiv:even").addClass('even'); 
    $('.resultsdiv').hover(function() { 
      $(this).addClass('highlight'); 
     }, 
     function() { 
      $(this).removeClass('highlight'); 
    }); 
}); 
</script>

來源

2010-03-23 10:01:26

我使用下面的代碼。該表是使用ajax獲取的。 ajaxing成功後，我觸發了tableready（）函數。裏面，我有以下的代碼，它與斑馬小部件的表分類器完美合作。

$("#ResultsDisplay").tablesorter({ widgets: ["zebra"] }); 
    $("#ResultsDisplay").trigger("update"); 
    $(".tablesorter tr").mouseover(function(){ $(this).addClass("over");}); 
    $(".tablesorter tr").mouseout(function() { $(this).removeClass("over"); }); 

    $('.tablesorter tr').click(function() { 
     if ($(this).hasClass('colorMe')){ 
      $(this).removeClass('colorMe'); 
     } 
     else { 
      $(this).closest('table').find('tr').removeClass('colorMe'); 
      $(this).addClass('colorMe'); 
     } 
    });

來源

2012-04-05 20:13:15 udayasankar

我用這個代碼表示替代顏色，鼠標和選定的行顏色highlight.it將工作如果由AJAX生成錶行，然後只是調用這個腳本，將工作。

function rowHighlight(){    
    $(function(){ 
    $("#facCodes tr:odd").addClass('oddRow'); 
    $("#facCodes tr:even").addClass('evenEven'); 
    $('#facCodes tr').hover(function() { 
      $(this).addClass('hover'); 
     }, 
     function() { 
      $(this).removeClass('hover'); 
    }); 

}); 
$('#facCodes tr').click(function(event){ 
    $(this).addClass("click").siblings().removeClass("click"); 
}); 

}

來源

2014-01-07 11:29:45

jQuery的交替行的顏色似乎並不懸停功能

回答

相關問題