將鼠標懸停在輸入文本上時如何顯示輸入按鈕？

Question

我想發生什么

• 將鼠標懸停在Worksheet-Problem輸入文本上時，我希望顯示.button-add並且用戶可以單擊它。 當用戶將鼠標懸停在Worksheet-Problem輸入文本之外時，我希望.button-add消失。
• 當將鼠標懸停在.button-bullet ，我希望.button-bullet消失而.button-remove淡入淡出

我覺得這應該很簡單。 我可能使用了不正確的jQuery函數。

實際發生了什么

.button-add持續閃爍， .button-remove fadingIn和.button-bullet消失之間的協調是失敗的。

添加按鈕故障

消除按鈕故障

我的密碼

我將.button-add和.button-remove的display設置為none 。 然后，我使用fadeIn()和fadeOut()切換它們的display以及.button-bullet的display 。

HTML

.button-add, .button-remove{
    display: none;
}

jQuery的

$("input[type='text'][name='Worksheet-Problem']").focus(function(){
        $(".button-add").fadeIn(300);  
    })
    $("input[type='text'][name='Worksheet-Problem']").hover(function(){
        $(".button-add").fadeIn(300);
    })
    $("input[type='text'][name='Worksheet-Problem']").mouseout(function(){
        $(".button-add").fadeOut(300);
    })
    $(".button-bullet").hover(function(){
        $(this).hide();
        $(".button-remove").fadeIn(300);
    })
    $(".button-remove").mouseout(function(){
        $(this).fadeOut(300);
        $(".button-bullet").fadeIn(300);
    })

的jsfiddle

Answer 1

嘗試這個：

$(document).ready(function(){

    $("input[type='text'][name='Worksheet-Problem']").closest('.row').hover(function()      {
        $(".button-add").fadeToggle(300);
    })
    $(".button-bullet").closest('.input-group-btn').hover(function(){
        $('.button-bullet').toggle();
        $(".button-remove").toggle();
    })

    $(".button-add").click(function(){
        console.log("Add-Button pressed");
    })
    $(".button-remove").click(function(){
        console.log("Remove-Button pressed");
    })
})