How to show input button when hover over input text?

Question

What I want to happen

When hover over Worksheet-Problem input text, I want .button-add to show up and the user be able to click on it. When the user hovers away from the Worksheet-Problem input text, I want .button-add to fade away.
When hover over .button-bullet, I want .button-bullet to disappear and.button-remove to fade in its place

I feel like this should be simple enough. I might be using the incorrect jQuery functions.

What is actually happening

.button-add keeps blinking and coordination between.button-remove fadingIn and .button-bullet disappearing is a fail.

Add Button Glitch

Remove Button Glitch

My code

I set the display of the .button-add and .button-remove to none. And then I toggled their display, as well as .button-bullet's display, using fadeIn() and 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

Consider triggering your event when the user is interacting with the wrapper (in this case form-group) as that might provide better transitioning as they move back and forth. You can probably also reduce your code and use fadeToggle instead of fadeOut and fadeIn — Robert
– Robert, Commented Jun 30, 2016 at 22:44
I will update your fiddle to the desired result give me 15 min i will post an answer for you — Emad Morris Zedan
– Emad Morris Zedan, Commented Jun 30, 2016 at 23:10

Nordine · Accepted Answer · 2016-06-30 23:29:24Z

2

Try this:

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

answered Jun 30, 2016 at 23:29

Nordine

8868 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to show input button when hover over input text?

What I want to happen

What is actually happening

My code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What I want to happen

What is actually happening

My code

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related