javascript - 将鼠标悬停在输入文本上时如何显示输入按钮？

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() 切换它们的 display，以及 .button-bullet 的 display和 fadeOut()。

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");
    })
})