Basic jQuery dropdown

Question

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.

Answer 1

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

• Alex: You can do this without requiring any extra markup as my example shows

Answer 2

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

Answer 3

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/