JQuery не устанавливает атрибуты onmouseover и onmouseout в google chrome?

Question

[Павел Чипак]

На событие onload вешается функция которая уменьшает большие изображения на странице.



При наведении курсора мыши картинка должна становится оригинального размера. Если делать так

$(this).attr({<br>
        width: width_resized,<br>
        onmouseover: '$(this).attr("width", ' + width + ');',<br>
        onmouseout: '$(this).attr("width", ' + width_resized + ');'    <br>
});<br>

то в лисе и опере работает отлично, а в хроме устанавливается только ширина.

$(this).attr("onmouseover", '$(this).attr("width", ' + width + ');');

Так тоже не работает.



В чем может заключаться проблема?

Answer 1

[homm]

Проблема в том, что вы пользуетесь нестандартным для jQuery API, которое он не может поддерживать.

Правильно это делать так:

$(this)
    .width(width_resized)
    .mouseover(function () {
        $(this).width(width);
    })
    .mouseout(function() {
        $(this).width(width_resized);
    });

Comments

[Павел Чипак]

Спасибо!

[lashtal]

в данном случае более правильно использовать .hover(), который навешивает mouseEnter и mouseLeave

Answer 2

[nikitammf]

Дело в том что вы устанавливаете атрибут и отсюда некорректная работа в разных браузерах.
Вот в этой статье есть ответ DOM: свойства VS атрибуты.