悬停在右侧显示编辑图标答案

【问题标题】：on hover show edit icon on right悬停在右侧显示编辑图标
【发布时间】：2011-11-24 13:26:40
【问题描述】：

我有一些关于未排序列表的系列，用<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>

【问题讨论】：

你必须多指定一点你所说的“显示编辑图标”是什么意思，你想把它放在哪里？

标签： jquery-ui jquery jquery-selectors

【解决方案1】：

看看这个；

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

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

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

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

【讨论】：

@erimerturk.. 虽然根据我的需要做了一些调整，但总的来说正是我想要的.. 谢谢..

【解决方案2】：

为此，您应该使用mouseenter 和mouseleave 将链接附加到任何您想要的位置。

【讨论】：

【解决方案3】：

尝试以下方法：

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

如果您只想显示带有# href 属性的锚标记的图标，则可以使用'a[href="#"]' 选择器。

【讨论】：

【解决方案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/

【讨论】：

【解决方案5】：

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>

【讨论】：