0

私はjQueryを初めて使用しますが、私が間違っていることを一生理解することはできません。「Changeit」というテキストにカーソルを合わせると、テーブルの行の色が変わります。助けてください！（はい、ドキュメントは保存されたjQueryライブラリを参照しています）

<html>
<head>
    <title>testestsets</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $('#changer').hover(function) {
            $('#row1').css({
                'background-color':'#000',
                'color':'#FFF'
            });
        };
    </script>
</head>

<body>
    <table border="1">
        <tr id="row1">
            <td>ONE</td><td>TWO</td><td>THREE</td><td>FOUR</td>
        </tr>
    </table>
    <br/><br/>
    <p id="changer">Change it</p>
</body>
</html>
4

6 に答える 6

7

次のように、jQuery コードをドキュメント対応の呼び出しにラップします。

$(document).ready(function () {
  $('#changer').hover(function() {
    $('#row1').css({
      'background-color': '#000',
        'color': '#FFF'
    });
  });
});

また、括弧を使用した関数呼び出しにタイプミスがありました。

jsFiddle の例

于 2013-01-15T16:38:49.770 に答える
1

DOM に存在する前に.hoverコールバックをバインドしています。JavaScript を下に移動するか、ラップしてください#changer#changer<p id="changer">$(document).ready(function () {})

CSS 疑似クラス:hoverを使用して、やろうとしていることを実行することもできます。これにより、ホバー時に追加されたクラスの削除も自動的に処理されます。

于 2013-01-15T16:39:08.397 に答える
1 
$(document).ready(function () {    
    $('#changer').hover(
        function() {
            $('#row1').css({
                'background-color':'#000',
                'color':'#FFF'
            });
        }, 
        function() {
            // what that do when they go out
        }
    );
});
于 2013-01-15T16:40:08.020 に答える
1

あなたのjQueryにはバグがあります。)間違った場所にあり、アフター()機能)がなく、ホバー機能を閉じています。

$(function(){ });また、イベントを DOM 要素に割り当てる前に DOM をロードして準備できるように、内にラップすることもできます。

次のように変更します。

$(function(){
    $('#changer').hover(function(){
        $('#row1').css({
            'background-color':'#000',
            'color':'#FFF'
        });
    });
});
于 2013-01-15T16:40:38.283 に答える
0

あなたはとても親しかった。document.ready と括弧がありません。

$(document).ready(function(){
    $("#changer").hover(function(){
        $("tr").css({
            'background-color': '#000',
            'color': '#fff'
        });
    });
});
于 2013-01-15T16:40:09.750 に答える
0

シンプルなCSSを使用してタスクを実行できます

#changer:hover { background-color: #000;color:fff; }

または、 jquery を使用する場合:

    $(document).ready(function () {    
    $('#changer').hover(
        function() {
            $('#row1').css({
                'background-color':'#000',
                'color':'#FFF'
            });
        }, 
        function() {
           $('#row1').css({
                'background-color':'#FFF',
                'color':'#000'
            });
        }
    );
});
于 2013-01-15T16:41:28.190 に答える