列表项hover上的jQuery，显示该单个项的删除按钮

Question

以下是我所拥有的预览：

---

---

右边是我盘旋的时候。我想要的是删除图标仅显示该悬停项目。

<script>
$(document).ready(function(){ 

    $(".removeService").hide();     

    // Deleting an Individual Service
    $("#dashboard ul li span").hover( function() {
        $(".removeService").show();
    });

});
</script>

这可能是一个非常简单的修复，但如果有人能指出我正确的方向，我会非常感激。

谢谢！

Answer 1

如果您希望删除范围仅在鼠标悬停时显示并隐藏，则可以通过提供隐藏删除范围的第二个函数为.hover()函数使用“重载”。

请参阅此小提琴here以获取示例。

一个非常简单的例子可能如下所示：

$(document).ready(function(){
    $('.remoteService').hide()
        .click(function(){alert('delete!');});

    $('#dashboard ul li span').hover(
    function(){  //this is fired when the mouse hovers over
        $(this).find('.remoteService').show();
    },
    function(){  //this is fired when the mouse hovers out
         $(this).find('.remoteService').hide();
    });

});

我希望这有帮助！

Answer 2

<script>
$(document).ready(function(){ 

    $(".removeService").hide();     

    // Deleting an Individual Service
    $("#dashboard ul li span").hover( function() {
        $(this).find(".removeService").show();
    });

});
</script>

这假定.removeService嵌套在#dashboard ul li span中。如果不是这种情况，请提供您的HTML。

代码中this是悬停在其中的实际span。 find将在该范围内搜索removeService类的所有元素。

Answer 3

修改

使用image标记代替background-image（请参阅底部的DEMO链接）以使其可点击。

DEMO 此处。

---

为什么不使用CSS :hover来获得相同的效果。

DEMO 此处

Answer 4

您必须使用jQuery执行此操作，您可以使用纯CSS实现相同的行为：

#dashboard ul li .removeService {
    display: none;
} 

#dashboard ul li:hover .removeService {
    display: inline;
} 

jsfiddle

上的示例