Используя jQuery, как вы можете изменить изображение при наведении курсора внутри div?

Question

У меня есть следующий код jQuery для замены изображения, когда вы наводите курсор мыши, но оно, похоже, не работает. Что не так с кодом ниже?

$(function() {
$("div.delete img")
    .mouseover(function() {
        $(this).attr("src", "../../images/comment-hover-del.png");
    })
    .mouseout(function() {
        $(this).attr("src", "../../images/comment-del.png");
});
 });

Это мой HTML:

<div class="delete" id="26"><img src="../../images/comment-del.png" border="0"></div>

Answer 1

Вы можете немного изменить его, например так:

$(function() {
  $("div.delete").hover(function() {
     $("img", this).attr("src", "../../images/comment-hover-del.png");
  }, function() {
     $("img", this).attr("src", "../../images/comment-del.png");
  });
});

Это срабатывает при наведении курсора на div, поскольку при смене изображения может быть небольшая вспышка, приводящая к свертыванию изображения и срабатыванию mouseout до загрузки следующего изображения. Я бы назначил ширину / высоту для <div>, если вы используете вышеописанный метод, чтобы предотвратить это поведение, или для изображения, если вы используете свой текущий метод.

В качестве альтернативы, вы можете присвоить свойству div a background-image css и самому <div> указатель мыши (полностью удалив <img>) и сделать все это в CSS, например:

div.delete { 
  width: 100px; 
  height: 100px; 
  background-image: url('../../images/comment-del.png') center;
}
div.delete:hover { 
  background-image: url('../../images/comment-hover-del.png') center;
}

Answer 2

Вы не можете делать подобные эффекты, хотя. Если вы хотите изменить src, а также сможете анимировать его, сделайте следующее:

$("#clone_el").css("z-index",2);
ele = $("#clone_el").clone().css({position:"relative","top":"-"+$("#clone_el").eq(0).height()+"px","z-index":"1"}).attr("src","/path/to/new/src");

$("#clone_el").after(ele).fadeOut();

Answer 3

На самом деле мой исходный код был в порядке, но я просто понял, что изображение и div были помещены туда динамически. Поэтому из-за этого мне нужно было использовать прямую трансляцию ниже.

(Я понял это после того, как некоторые хорошие ответы тоже не сработали, что не имело смысла.)

$('div.delete img').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover') {
        $(this).attr("src", "../../images/comment-del-hover.png");
    } else {
         $(this).attr("src", "../../images/comment-del.png");
    }
});

Answer 4

Попробуйте это:

$(function() {
$("div.delete")
    .mouseover(function() {
        $(this).find('img').attr("src", "../../images/comment-hover-del.png");
    })
    .mouseout(function() {
        $(this).find('img').attr("src", "../../images/comment-del.png");
});
 });