0

我有一个这样的网页，里面有一些 jQuery 使用http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css

我想定义“突出显示行”行为，但不知何故，只要我使用上面提到的 jQuery 主题，我就无法覆盖它。

我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
    $(function() {
        $( "#tabs" ).tabs();
        $( document ).tooltip();

        $("tbody > tr:even").addClass("even");
        $("tbody > tr:odd").addClass("odd");
        $("#company_row ~ tr").bind( "mouseover", function(e){
           $(this).toggleClass("highlight");
        });
        $("#company_row ~ tr").bind( "mouseout", function(e){
           $(this).toggleClass("highlight");
        });
    });
    </script>
</head>

<body>
<style>
tr.even { background-color: #efefef; }
tr.odd { background-color: #fff; }
.highlight { background-color: #fffdcd !important; }
</style>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1" title="Info about companies">Companies</a></li>
    <li><a href="#tabs-2" title="Info about people">People</a></li>
  </ul>
  <div id="tabs-1">
    <table border='2' id="companies"></table>
  </div>
  <div id="tabs-2">
    <table border='2' id="people"></table>
  </div>
</div>

</body>
</html>

我也试过这个

$("#companies").hover(
  function () {
    $(this).css("background","yellow");
  }, 
  function () {
    $(this).css("background","");
  }
);
4

1 回答 1

1

尝试将tr:evenandtr:odd选择器替换为tr:nth-child(even)

您根本不必使用 jQuery 来应用这些样式，尝试使用类似于以下形式的规则：

tbody > tr:nth-child(even):hover {
  background-color: #efefef;
}
于 2013-05-23T07:54:51.217 回答