悬停的 CSS 仅适用于带有 jQuery 的奇数行答案

【问题标题】：CSS for Hover only applied to odd rows with jQuery悬停的 CSS 仅适用于带有 jQuery 的奇数行
【发布时间】：2018-10-25 06:24:09
【问题描述】：

我有这段代码，它可以很好地交替实际行，但只悬停在“奇数”行上。

我正在使用以下代码：

    <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;}

有什么想法吗？

【问题讨论】：

标签： jquery css html-table

【解决方案1】：

你的风格被你的替代风格覆盖。你必须换线。

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

现在.alt 的优先级低于.over，因为它是之前定义的。

【讨论】：

【解决方案2】：

更改 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;}

【讨论】：

【解决方案3】：

这里有示例 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>

【讨论】：

【解决方案4】：

您不需要 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 必须查找并更新页面上多个元素（例如表格行）的行为才能应用该行为。

【讨论】：

浏览器肯定支持:even，但当:hover不是a标签时，只有少数浏览器支持
你能提供一个支持这个的链接吗？ IE7+ 和大多数其他支持非锚元素的:hover：quirksmode.org/css/contents.html
:hover 在 IE7+ 中用于非锚链接。 jsfiddle.net/uEHs4/1（上面链接的 quirksmode.org 文档也支持）。