javascriptを使ってホバーを使って色を変える

こんにちは、私はそれの上にマウスを置くと "Hello"の色を変えようとしています。これまでのところ私はそれを動作させることはできません。コンソールを見ると、 "ReferenceError：ホバーは定義されていません"という同じことが出てきます。どのように私はこれを修正し、これは唯一の問題ですか？ありがとう！javascriptを使ってホバーを使って色を変える

<html> 
<head> 
<title></title> 

<script> 
    var $Osc = { 
hover: function(event){ 
    ("style", "background-color:blue;") 
}, 
out: function(event){ 
    ("style", "background-color:white;") 
} 

} 
var $Osc = document.getElementById("change"); 
hover.addEventListener("mouseover", $Osc.hover, false); 
out.addEventListener("mouseout", $Osc.out, false); 

    </script> 


</head> 
<body> 
<div id="change"onmouseover="hover(this)" onmouseout="out(this)"> 
    Hello 
</div> 
</body> 
</html>

出典

2016-12-18 Northwood

hoverとoutが定義されている場所はありません。

var $OscElement = document.getElementById("change"); 
$OscElement.addEventListener("mouseover", $Osc.hover, false); 
$OscElement.addEventListener("mouseout", $Osc.out, false);

ます。また、問題が発生し、現在の要素として$0scを上書きしている：あなたはあなたのコードをこのように変更する必要があります。最後に、ページの読み込み後にスクリプト全体を実行するか、要素の後にスクリプトを置きます。

要素にはonmouseイベントは不要ですが、削除することはできます。

最後に、CSSを設定する方法は全く間違っています。現在の要素にはevent.targetを使用する必要があります。

固定コードは次のようになります。

var $Osc = { 
 
    hover: function(event) { 
 
    event.target.style.backgroundColor = "blue"; 
 
    }, 
 
    out: function(event) { 
 
    event.target.style.backgroundColor = "white"; 
 
    } 
 

 
} 
 
var $OscElement = document.getElementById("change"); 
 
$OscElement.addEventListener("mouseover", $Osc.hover, false); 
 
$OscElement.addEventListener("mouseout", $Osc.out, false);

<div id="change"> 
 
    Hello 
 
</div>

最終的には、全体のことを簡単に確認、CSSを使用していない達成することができますが、JavaScriptを有効にしてやりたい理由：

#change { 
 
    background: white; 
 
} 
 
#change:hover { 
 
    background: blue; 
 
}

<div id="change"> 
 
    Hello 
 
</div>

を

出典

2016-12-18 19:50:16

javascriptを使ってホバーを使って色を変える

答えて

関連する問題