用於懸停的CSS僅適用於使用jQuery的奇數行

我已經得到了這一點代碼，它可以很好地交替實際行，但只能在「奇數」行上盤旋。用於懸停的CSS僅適用於使用jQuery的奇數行

我用下面的代碼：

<script type="text/javascript"> 
$(document).ready(function(){ 
    //jQuery ready is quicker than onload 
$(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");}); 
$(".stripeMe tr:even").addClass("alt"); 
});

這是我使用

#table tr.over td{background: #bcd4ec;} 
    #table tr.alt td {background: #ecf6fc;}

任何想法的CSS？

來源

2011-06-15 Khuram Malik

您在風格被覆蓋你的ALT風格。你必須切換線路。

#table tr.alt td {background: #ecf6fc;} 
#table tr.over td{background: #bcd4ec;}

現在.alt具有優先級低於.over因爲它前面定義。

來源

2011-06-15 15:16:42 DanielB

更改CSS：

#table tr td { /* regular not hovered */ } 
#table tr.alt td { /* alternative, not hovered */ } 

#table tr.over td {background: #bcd4ec;} 
#table tr.alt.over td {background: #ecf6fc;}

來源

2011-06-15 15:14:47 yoavmatchulsky

你不需要jQuery/Javascript來管理它。作爲yoavmatchulsky提到，改變你的CSS，但不是過類，使用方法：將鼠標懸停

#table tr td { /* regular */ } 
#table tr.alt td { /* regular */ } 

#table tr:hover td { background: #bcd4ec; } 
#table tr.alt:hover td { background: #ecf6fc; }

編輯：，因爲它需要使用jQuery，這可能無法完全回答OP。不過，這會比使用jQuery IMO更快。 jQuery將不得不查找並更新頁面上多個元素（例如表格行）上的行爲以應用該行爲。

來源

2011-06-15 15:19:43 Rob

瀏覽器肯定支持'：even'，但只有少數支持'：hover'時，它不是一個'了'標籤 – Neal 2011-06-15 15:24:16

你能提供一個鏈接支持呢？ IE7 +和其他大多數人都支持非錨點元素上的'：hover'：http://www.quirksmode.org/css/contents.html – Rob 2011-06-15 15:27:02

IE絕對**不支持'：hover'嘗試一下... – Neal 2011-06-15 15:28:07

這裏你有一個例子wotking，問題是css的層次結構，現在正在工作，因爲over class y down。在這種情況下，over class將會替換alt類。

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5b1.js"></script> 
</head> 
<body> 
    <style> 
    #table tr.alt { background: #ecf6fc;} 
    #table tr.over { background: red;} 
    </style> 
<table id="table" class="stripeMe"> 
    <tr> 
    <td>aaaa</td> 
    </tr> 
    <tr> 
    <td >bbbb</td> 
    </tr> 
</table> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    //jQuery ready is quicker than onload 
    $(".stripeMe tr").mouseover(function()   {$(this).removeClass("over");$(this).addClass("over");}).mouseout(function() {$(this).removeClass("over");}); 
    $(".stripeMe tr:even").addClass("alt"); 
}); 
</script> 
</body> 
</html>

來源

2011-06-15 15:26:37 JAiro

用於懸停的CSS僅適用於使用jQuery的奇數行

回答

相關問題