Изменить цвет элемента onMouseOver с помощью javascript

Question

Я пишу javascript, который изменит цвет элемента, когда мышь нависает над ним. Я прекрасно знаю, как это сделать, используя jQuery, но на этот раз у I есть, чтобы сделать это, используя либо чистый JS, либо Prototype.

Почему это не работает:

<div id="boundary1"></div>

document.getElementById("boundary1").onmouseover(function() { 
    alert("test"); 
}) 

поджигатель возвращает:

TypeError: document.getElementById(...).onmouseover is not a function

Answer 1

Ваш синтаксис не так, вы можете думать немного слишком «Jquery», попробуйте следующее:

var boundary = document.getElementById('boundary'); 
var mouseOverFunction = function() { 
    // this.style.color = '#000'; // your colour change 
}; 
boundary.onmouseover = mouseOverFunction; 

Я отделил логику, чтобы сделать разработку и логику более понятной, она делает свои функции многоразовый.

Answer 2

Try:

document.getElementById("boundary1").onmouseover = function() { 
    alert("test"); 
} 

More Info.

Answer 3

Попробуйте этот код

<td onMouseOver="this.bgColor='#00CC00'" onMouseOut="this.bgColor='#009900'" bgColor=#009900> 
<A HREF="#">Click Here</A></TD> 

Answer 4

Вы можете сделать это с помощью CSS

<style> 
.changecolour:hover 
{ 
background-color:yellow; 
} 
</style> 

Теперь текст, который вы хотите изменить цвет

<span class ="changecolour">Color changes when mouse comes here.</span> 

Ссылка: http://www.w3schools.com/cssref/sel_hover.asp

Answer 5

Прот otype способ сделать это было бы так:

$('elementId').observe('mouseenter', function(evt){ 
    this.setStyle('background-color: yellow'); 
}).observe('mouseleave', function(evt){ 
    this.setStyle('background-color: inherit'); 
}); 

Но, как другие уже указывали, реальный способ сделать это с помощью CSS. Единственная причина, по которой я мог бы подумать, что это нужно сделать в JS, - это если вам нужно поддерживать IE < = 8, который не любит делать псевдо-класс hover на любом объекте, кроме тега A.