Jquery, добавить и удалить элемент при наведении

Question

Я столкнулся с проблемой, которую я пытался почти все без решения.

$('a.hovered').hover(function () {
    $(this).after(' <img src="images/icons/famfamfam/silk/user_go.png" />');
},function () {
    $(this).remove(' <img src="images/icons/famfamfam/silk/user_go.png" />');
});

Конечно, я пробовал много версий этого метода remove (), но безуспешно. Я буду рад, если кто-нибудь сможет мне помочь с этой проблемой.

Кроме того, я хотел бы добавить эффект fadeIn () и fadeOut (), но, конечно, это также не удалось.

Я могу добавить изображение, но не могу удалить его (даже fadeIn не работает, пока я могу успешно добавлять изображения).

Спасибо за вашу помощь и время заранее.

Answer 1

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

Просто поместите img в html с помощью и идентификатора и style="display: none;", чтобы скрыть его.

Ваш код javascript становится:

$('a.hovered').hover(function () {
    $("#user_go").show();
},function () {
    $("#user_go").hide();
});

Answer 2

Назовите свои элементы, это облегчит вам жизнь, т. Е.

$('a.hovered').hover(function () {
    $(this).after(' <img id="user_go" src="images/icons/famfamfam/silk/user_go.png" />');
},function () {
    $("#user_go").remove();
});

Answer 3

Вы не можете ссылаться на созданный объект таким образом, попробуйте

$('a.hovered').hover(function () {
    $(this).after(' <img src="images/icons/famfamfam/silk/user_go.png" id="addedImage"/>');},
    $('#addedImage').remove();
});

Да, и пока я пишу, два других поста пишут то же самое:)

Answer 4

почему бы просто не сделать это?

$('a.hovered').hover(function () {      
$(this).after(' <img src="images/icons/famfamfam/silk/user_go.png" />');  },
function () {
$(this).find('img').remove();
 });  

Answer 5

.remove () не берет кусок HTML:

$('a.hovered').hover(function () {
    $(this).after(' <img src="images/icons/famfamfam/silk/user_go.png" id="go_image" />');
},function () {
    $('#go_image').remove();
});