0

私はいくつかのjQueryを使用してそのようなWebページを持っています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