CODEWITHSUNDEEP
jquery
Jordan Foreman
Jordan Foreman

Reputation: 3888

Basic jQuery dropdown

I'm new to jquery, so forgive my ignorance. I'm trying to create a delete button, and when the user hovers over the delete button, a small confirmation appears for the user to either cancel (which will just hide the confirmation) or proceed (which will execute some code).

I have been able to get it to display the confirmation when the user hovers over the delete link, but it disappears when the user moves the mouse off of the link, (as they hover over the confirmation message)

Here's a jsfiddle of what I have so far.

Upvotes: 0

Views: 77

Answers (3)

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

Wrap the html in a container and append the hover function to the container.

Working example: http://jsfiddle.net/KgtF2/2/

HTML

<div id="container">
<a href="#" class="deleteLink">Delete</a>
                <div class="hidden links">
                        Are you sure?<br />
                        <a href="#">Yes</a> |
                        <a href="#">No</a>
                </div>
</div>

JS:

$(document).ready(function(){
                $("#container").hover(
                    function(){
                        $(".links").removeClass("hidden").addClass("shown");
                    },
                    function(){
                        $(".links").removeClass("shown").addClass("hidden");
                    });
            });

Upvotes: 3

Chandu
Chandu

Reputation: 82893

Wrap the link and the corresponding div in another div container and then assign the hover event handling to the parent container.

Something like:

<div id="deleteContainer">
    <a href="#" class="deleteLink">Delete</a>
    <div class="hidden links">
            Are you sure?<br />
            <a href="#">Yes</a> | 
            <a href="#">No</a>
    </div>
</div>

and JS:

$(document).ready(function() {
    $("#deleteContainer").hover(

    function() {
        $(".links").removeClass("hidden").addClass("shown");
    }, function() {
        $(".links").removeClass("shown").addClass("hidden");
    });
});

Working Example: http://jsfiddle.net/KgtF2/1/

Upvotes: 1

Alex
Alex

Reputation: 7374

Look at this:

http://jsfiddle.net/ahallicks/KgtF2/4/

The margin is to make sure of an overlap, just make sure that the class of .links does the same as the deleteLink class :-)

Upvotes: 2

Related Questions