jQuery懸停在列表項上，顯示該單個項的刪除按鈕

Question

以下是我所擁有的預覽：

---

---

右邊是我徘徊的時候。 我想要的是刪除圖標僅針對該懸停項目顯示。

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

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

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

});
</script>

這可能是一個非常簡單的解決方案，但是如果有人能指出正確的方向，我將非常感激。

謝謝！

Answer 1

如果希望刪除范圍僅在鼠標懸停時顯示，而在鼠標退出時隱藏，則可以通過提供第二個隱藏刪除范圍的函數來對.hover()函數使用“重載”。

看到這個小提琴這里的一個例子。

一個非常簡化的示例如下所示：

$(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鏈接）以使其可點擊。

演示在這里。

---

為什么不使用CSS :hover獲得相同的效果。

在這里演示

Answer 4

您必須使用jQuery來做到這一點，您可以使用純CSS實現相同的行為：

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

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

jsfiddle上的示例