Question

我在un-order列表上有一些系列，用<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

为此目的，您应该使用mouseenter和mouseleave来附加链接并将其添加到您想要的链接之前。

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

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>

在悬停显示编辑图标右侧

5 个答案: