при наведении на иконку редактирования справа

Question

У меня есть несколько серий в списках отмены заказов, обернутых <a href="#">Link</a> Я хочу показать значок редактирования при наведении мыши на <a href="#">Link</a> ... как это сделать с помощью jquery?

<div class="user_welcome_dropDown_wrapper">
     <ul style="padding-left:0; margin-left:0;">
             <li><a href="#">Settings</a></li>
             <li><a href="#">Dummy Link</a></li>
             <li><a href="#">Dummy Link</a></li>
     </ul>

</div>

Answer 1

проверить это;

http://jsfiddle.net/M48tr/3/

$("a").hover(function(){

$(this).append("<div>edit</div>")
}, function(){

$(this).children("div").remove();
})

Answer 2

jQuery отлично подходит для всех видов вещей, но может быть излишним здесь.Это можно легко осуществить с помощью простого старого HTML + CSS.

http://jsfiddle.net/AzkPD/

CSS:

li {
width: 66px;
}

li:hover {  
background-image:url('http://glyphicons.com/wp-content/themes/glyphicons/images/updates.png');  
background-repeat:no-repeat;  
background-position:right center;
}​

HTML:

<ul>
    <li><a href="#">Settings</a></li>
</ul>​

Answer 3

Попробуйте выполнить следующее:

$('a').mouseenter(function () {
    // show icon here
});
$('a').mouseleave(function () {
    // hide or remove icon here
});

Если вы хотите показать значок только для тегов привязки с атрибутом href #, вместо него можно использовать селектор 'a[href="#"]'.

Answer 4

Это будет работать следующим образом: У вас есть:

...
<li><a href="#">Link</a><span class="additional">extra info</span></a></li>
...

С пролетом, скрытым через CSS:

.additional{
display: none;
}

и, наконец, jQuery:

$('a').hover(function(){
$(this).next('.additional').show();
},function(){
$(this).next('.additional').hide();
});

Подробнее см. http://api.jquery.com/hover/

Answer 5

Для этой цели вы должны использовать mouseenter и mouseleave , чтобы добавить и добавить ссылку на ссылку, где бы вы ни захотели.