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

Question

我想要发生什么

• 将鼠标悬停在Worksheet-Problem输入文字上时，我想要.button-add 显示，用户可以点击它。当用户盘旋时 远离Worksheet-Problem输入文字，我想要.button-add 逐渐消失。
• 将鼠标悬停在.button-bullet上时，我想要.button-bullet 消失，.button-remove淡出它的位置

我觉得这应该很简单。我可能正在使用不正确的jQuery函数。

实际发生了什么

.button-add一直闪烁，.button-remove fadingIn和.button-bullet消失之间的协调失败。

添加按钮故障

删除Button Glitch

我的代码

我将display和.button-add的{​​{1}}设置为.button-remove。然后我使用none和display切换了.button-bullet以及display fadeIn()。

HTML 的

fadeOut()

的jQuery

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

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