on hover show edit icon on right - jquery-ui

Question

I have some series on un-order lists, wrapped with Link I want show edit icon on mouseover of Link... how to do that using jquery?
<div class="user_welcome_dropDown_wrapper">
<ul style="padding-left:0; margin-left:0;">
<li>Settings</li>
<li>Dummy Link</li>
<li>Dummy Link</li>
</ul>
</div>

Answer 1

check this out;
http://jsfiddle.net/M48tr/3/
$("a").hover(function(){
$(this).append("<div>edit</div>")
}, function(){
$(this).children("div").remove();
})

Answer 2

For this purpose, you should be using mouseenter and mouseleave to append and prepend the link to whereever you want it.

Answer 3

Try the following:
$('a').mouseenter(function () {
// show icon here
});
$('a').mouseleave(function () {
// hide or remove icon here
});
If you only want to show the icon for anchor tags with a href attribute of # the 'a[href="#"]' selector can be used instead.

Answer 4

This would basically work the following way:
You have:
...
<li>Link<span class="additional">extra info</span></a></li>
...
With the span hidden via CSS:
.additional{
display: none;
}
and finally the jQuery:
$('a').hover(function(){
$(this).next('.additional').show();
},function(){
$(this).next('.additional').hide();
});
See http://api.jquery.com/hover/ for more info

Answer 5

jQuery is great for all sorts of things, but might be overkill here. This can easily be pulled off using plain old 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>Settings</li>
</ul>​