Ошибка с .html()

[Undefitied]

Вот простой код, с самого начала не могу найти ошибку:

Пробовал создать простое меню, которое меняет цвет при наведении. Вот код, не могу найти ошибку.

Элемент в html:

<a class="test"><img src="images/top_menu/main_normal.png" width="67" height="27">

$(document).ready(function() {



$('.test').mouseover(function() {
$('.test').html('<img src="images/top_menu/main_linked.png" width="67" height="27">');
});

$('.test').mouseout(function() {
$('.test').html('<img src="images/top_menu/main_normal.png" width="67" height="27">');
});



}); //ready ends

Работает только mouseover. Обе по отдельности функции работают.

[Undefitied]

Немного подумав решил, что браузер и так занят mouseover и по этому не смотрит на другие функции по поводу этого объекта.

Хотелось бы все-таки услышать грамотное объяснение и возможно совет по решению.

Спасибо.

[Skipp]

<img src="http://www.google.ru/images/srpr/logo3w.png" onmouseover="this.src='http://img.yandex.net/i/www/logo.png'" onmouseout="this.src='http://www.google.ru/images/srpr/logo3w.png'" />

[Undefitied]

Skipp,
Спасибо, но думаю лучше было бы разобраться в проблеме именно в jQuery, что бы было меньше вопросов в будущем.

[Pavel M.]

лучше используйте .hover и меняйте src у картинки

<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
	$(function() {
		var el = $('a.test'),
			img = $('img', el);
			
		el.hover(
			function () {
			  img.attr('src', 'http://placehold.it/100/ff0000');
			},
			function () {
			  img.attr('src', 'http://placehold.it/100/00ff00');
			}
		);
	});
</script>
<a class="test"><img src="http://placehold.it/100/00ff00"></a>