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

【问题标题】：How to show input button when hover over input text?将鼠标悬停在输入文本上时如何显示输入按钮？
【发布时间】：2016-06-30 22:27:54
【问题描述】：

我想要发生的事情

当鼠标悬停在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。然后我切换了他们的display，以及.button-bullet的display，使用fadeIn()和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

【问题讨论】：

考虑在用户与包装器（在本例中为form-group）交互时触发您的事件，因为这可能会在他们来回移动时提供更好的过渡。您也可以减少代码并使用fadeToggle 而不是fadeOut 和fadeIn
我会将您的小提琴更新为所需的结果，给我 15 分钟，我会为您发布答案

标签： javascript jquery html css twitter-bootstrap

【解决方案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");
    })
})

【讨论】：