问题描述:

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.

网友答案:

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 :-)

网友答案:

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");
                    });
            });
网友答案:

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/

相关阅读:
Top