Ошибка с .html()
Вот простой код, с самого начала не могу найти ошибку:
Пробовал создать простое меню, которое меняет цвет при наведении. Вот код, не могу найти ошибку. Элемент в 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. Обе по отдельности функции работают. |
Немного подумав решил, что браузер и так занят mouseover и по этому не смотрит на другие функции по поводу этого объекта.
Хотелось бы все-таки услышать грамотное объяснение и возможно совет по решению. Спасибо. |
<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'" /> |
Skipp,
Спасибо, но думаю лучше было бы разобраться в проблеме именно в jQuery, что бы было меньше вопросов в будущем. |
лучше используйте .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>
|
| Часовой пояс GMT +3, время: 03:59. |