2

onmouseover と onmouseout に苦労しています。

私が訪れたすべてのサイトは、この構文をほぼ正確に示しています。私は実際にMozillaからコピーして貼り付けました。私が抱えている問題は、すぐに largeDiv および smallDiv 関数を呼び出すことです。(最終的には、マウスオーバー イベント中に新しいクラスを div に適用し、マウスアウト時に古いクラスに戻ることを望んでいます。) マウス イベントが原因であると確信しています。また、onload 関数が問題を引き起こしたのではないかと思っていましたが、コメントアウトしたところ、変更されたのは小さな div が期待どおりに読み込まれなかったことだけでした。

イベントを適切に呼び出していないと思って、イベント リスナーを使用しようとしましたが、まったく機能しませんでした。適切にコーディングしたかどうかはわかりませんが、1 時間以上費やしたことはありません。私は数多くの微調整、onmouseover のキャメルケース化、括弧の使用などを試みました...とにかく、ここにコードがあります:

var introEl = document.getElementById("intro");

//display large div by default and 
//use small div with js enabled
window.onload = function(){
    introEl.className = "small";
}

    function largeDiv(){
    console.log("It Worked");
};

    function smallDiv(){
    console.log("Mouse Out!");
};

introEl.onmouseover = largeDiv();
introEl.onmouseout = smallDiv();

これをブラウザでコーディングし、それをjsFiddleにコピーしてこの質問をすると、読み込み時に小さな div が読み込まれませんでしたが、ステートメントはログに記録されました。CodePenに置いたところ、説明したとおりに機能しました。原因は不明ですが、今回で2回目です。

ところで、CodePen や jsFiddle に行ってみると、私のデザイン スキルが不足していることがわかります。私は遊び場のために、そしてノートブックのように機能するコードを保持する場所のためにこれを行っています。私はそれがはるかに悪化することを約束します。

いつものように、どんな助けも大歓迎です。

4

2 に答える 2

3 
var introEl = document.getElementById("intro");

//display large div by default and 
//use small div with js enabled
window.onload = function(){
    introEl.className = "small";
}

    function largeDiv(){
    console.log("It Worked");
};

    function smallDiv(){
    console.log("Mouse Out!");
};

introEl.onmouseover = largeDiv; // here you don't need "()" with your defined functions
introEl.onmouseout = smallDiv; // here you don't need "()" with your defined functions
于 2012-12-27T05:58:09.597 に答える
2

次のフィドルに移動してください。いくつかの小さな変更を加えましたが、うまく機能しています

フィドル

また、使用することもできました

<div id="intro" onmouseover="largeDiv();" onmouseout="smallDiv();">
    Mouse over this text
</div>

ここで実際の例を参照してくださいfiddle 2

于 2012-12-27T05:58:13.417 に答える