用于悬停的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\");
});

这是我正在使用的CSS

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

有任何想法吗？

解决方法

您的风格被alt风格所取代。您必须切换线路。

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

现在，.alt的优先级比.over低，因为它的定义较早。 , 更改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;}

, 在这里，您有wotking的示例，问题是CSS的体系结构，现在正在工作，因为y类过多。在这种情况下，over类将替换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>

, 您不需要jQuery / Javascript来管理它。如yoavmatchulsky所述，更改您的CSS，但不要使用over类，而应使用：hover

#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将必须在页面上的多个元素（例如表行）上查找并更新行为，以应用行为。

用于悬停的CSS仅适用于jQuery的奇数行

如何解决用于悬停的CSS仅适用于jQuery的奇数行

解决方法

相关推荐