Develop Reference

How to Show/Hide div when hovering to any Link

I am facing one small Issue in displaying/hiding any div on hovering any anchor tag.
Currently I tried with Mouseenter and MouseLeave functions but Its not smooth.
Clickable Link:<a class="clickmeToSeeDiv" href="##"></a>
JS code:
$('.clickmeToSeeDiv').live("mouseenter",function(){
$('.leftborderActive').show();
});
$('.clickmeToSeeDiv').live("mouseleave",function(){
$('.leftborderActive').hide();
});
Above code sometime works sometimes not.
Please suggest if you all have any Idea or a better solution.
Thanks
Sham

live event is deprecated, use .on() instead (Attach an event handler function for one or more events to the selected elements).
Try this:
$(document).ready(function(){
$(".leftborderActive").hide(); // hide div on DOM ready
$( ".clickmeToSeeDiv" ).mouseenter(function() { // anchor mouseover event
$(".leftborderActive").show(); // show div
}).mouseleave(function() { //anchor mouseleave event
$(".leftborderActive").hide(); //hide div
});
});
DEMO
or
$(document).ready(function(){
$(".leftborderActive").hide();
$(document).on('mouseenter mouseleave','.clickmeToSeeDiv',function(){
$('.leftborderActive').toggle();
});
});

the method 'live' is deprecated, use 'on' instead.
$(document).on('mouseenter mouseleave', '.clickToSeeDiv', OnDivClick);
function OnDivClick(){
$('.clickToSeeDiv').toggle();
}

You could try JQuery's animate functions or set a timer on the show and hide methods so that they make the div operate a little more smoothely.
Also, make sure to cancel any previous events when you call the enter or leave methods so that the animations don't stack.

Create A JQuery Hover From Two Seperate Functions

I have the following code:
$('body').on('mouseenter', 'img[id$=_fav]', function(event) {
$(this).parent().css("border-top-color", "#000");
});
$('body').on('mouseleave', 'img[id$=_fav]', function(event) {
$(this).parent().css("border-top-color", "gray");
});
I am wondering how can I merge both of those into a single hover event or is this not possible using the 'live' way?
I want something like this:
$('body').on('hover', 'img[id$=_fav]', function(event) {
function(){ //mouse enter
$(this).parent().css("border-top-color", "#000");
}
function(){ //mouse leave
$(this).parent().css("border-top-color", "gray");
}
}

Don't use function() { twice for mouseenter and use , to separate mouseenter and mouseleave events like,
$('img[id$=_fav]').hover(function(event) {// use function() once for mouse enter event
$(this).parent().css("border-top-color", "#000");
},function(){ //mouse leave, you missed a comma in your code
$(this).parent().css("border-top-color", "gray");
});
Read hover()
Updated if you want to use hover for dynamically added elements then you have to use on() with mouseenter mouseleave events as you are using,
From jQuery.on()
Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a
shorthand for the string "mouseenter mouseleave". It attaches a single
event handler for those two events, and the handler must examine
event.type to determine whether the event is mouseenter or mouseleave.
Do not confuse the "hover" pseudo-event-name with the .hover() method,
which accepts one or two functions.

Basically you want to hook hover event on an element which was created/added dynamically into the DOM. Since we can't achieve the same syntax of hover with on, we could alternatively use the event type to divert the control flow. Technically speaking, hover will simply handle both mouseenter and mouseleave behind the screen. Try using the following code,
$(document).on("hover",'img[id$=_fav]', function(e) {
if(e.type == "mouseenter") {
}
else if (e.type == "mouseleave") {
}
});
DEMO based on 1.8 and below
Note : Please skip the above part. Just know about it for your future usage
Since hover event was removed from Jquery after 1.9, But not .hover() function. You cant use it hereafter with latest libraries. Instead try to handle by using mouseenter and mouseleave like below,
$(document).on({
mouseenter: function () {
},
mouseleave: function () {
}
}, 'img[id$=_fav]');
DEMO based on latest versions of JQuery

It's done exactly like you want: see the docs.

Difference between jQuery's mouseenter-mouseleave vs hover events?

Are there any differences between the following code snippet?
Snippet 1:
$("textarea").mouseenter(function() {
alert("Hello mouseenter!");
});
$("textarea").mouseleave(function() {
alert("Hello mouseleave!");
});
Snippet 2:
$("textarea").hover(function() {
alert("Hello mouseenter!");
}, function() {
alert("Hello mouseleave!");
});
I've checked the above code snippet in Chrome and Firefox, but both snippets were behaved identically. However, I wanted to make sure as, Is there any difference between mouseenter-mouseleave and hover events?

There is no difference between them... the hover() method registers the mouseenter and mouseleave handlers internally....
hover - code
hover: function( fnOver, fnOut ) {
return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}
The only difference is if you want make use of event delegation, in that scenario you cann't use .hover()

jQuery docs say:
Calling $( selector ).hover( handlerIn, handlerOut ) is shorthand for:
1 $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

Hover uses mouseenter and mouseleave.
The different one is mouseover and mouseout. enter/leave are not native events, they're a subset of over/out events.
over/out events also happen if you move from a parent into onto a child; you get a mouseout, and a mouseover when you move back. This is not good for hovers since you want the hover to apply to the element and it's children.

Using the hover function will shoot the event twice and it will act for both mouse in and mouse out,
eg
$("#xyz").hover(function (e) {
alert("In hover function ");
});
This will trigger the alert twice, once when you take your mouse on xyz element and once when you will take your mouse away from xyz. This may cause some trouble in your code, where as in mouseienter mouseleave event you can plan the event accordingly

Hover doesnot fire event for the children whereas mouseenter and mouseleave does.

hover and moveout not giving expcted result

Because I am creating DOM using Jquery it was difficult to copy the output so i am adding one image of code that i have captured using one tool
i have attached hover and mouseout event to id='nf1' using this code
$("#nf"+n).hover(function(){
$("#nf"+$(this).attr("post_id")+"post_delete").show();
});
$("#nf"+n).mouseout(function(){
$("#nf"+$(this).attr("post_id")+"post_delete").hide();
});
Here n is post_id and i am looping all post_id got from response.This attach events but not giving expected behaviour Like when mouse over to id='nf1post_delete' it is hide
Please ask if any doubts

The way you're describing this, you will actually want to pass two functions to .hover(), one for the action on mouseenter and one for the action on mouseleave. You can pass only one function to .hover(), but it will run that function when you roll over and when you roll out.
http://api.jquery.com/hover/
So, try this instead:
$("#nf"+n).hover(function(){
$("#nf"+$(this).attr("post_id")+"post_delete").show();
},function(){
$("#nf"+$(this).attr("post_id")+"post_delete").hide();
});
The .mouseout() function isn't needed at all.

At first, .hover() includes mouseenter and mouseleave. Do you put both function in there and don't use an additional event. Also don't use mouseout(). Use instead mouseleave().
So you either use hover(function(){},function(){}); alone, or you use mouseenter() and mouseleave().

Since you're manipulating the DOM, I'm going to recommend using jQuery .on() instead of .hover():
$(document).on({
mouseover: function(){
$("#nf"+$(this).attr("post_id")+"post_delete").show();
},
mouseout: function(){
$("#nf"+$(this).attr("post_id")+"post_delete").hide();
}
}, "#nf"+n);
If you're creating something in the DOM after the page has loaded, .on() helps to attach event listeners to it.
jQuery API for .on()

e.stopPropagation() and jQuery.hover()

Is there a way to have both of these work together or do I have to try using the mouseenter and mouseleave instead?

You can use event.stopPropagation() with .hover(), but you're actually using mouseenter and mouseleave with .hover() anyway. If you provide 1 function to .hover(), it runs on both events, if you provide 2 functions, the first is the mouseenter handler, the second is the mouseleave handler.
However, this may not be what you're after...since mouseenter doesn't fire when entering a child, that's actually specifically why it exists, mouseout will fire when entering a child. You can see that's there's no difference in a demo here, hover from top to bottom, comment and uncomment out the .stopPropagation(), it makes no difference...because the event doesn't bubble to the parent.
However if you are using mouseover and mouseout, then it would matter, like this:
$("li").mouseover(function(e) {
$(this).addClass("red").parents().removeClass("red");
}).mouseout(function(e) {
$(this).removeClass("red");
});​
Now we have a bubbling problem, because the event bubbles right up, adding the class to the parent we just removed it from, see a demo of the problem here. However if we stop that bubble, with the .stopPropagation(), we get the desired effect, like this:
$("li").mouseover(function(e) {
$(this).addClass("red").parents().removeClass("red");
e.stopPropagation();
}).mouseout(function(e) {
$(this).removeClass("red");
});​
You can see in this demo how this works differently.
In short: yes event.stopPropagation() works with .hover(), but most likely, it's not exactly what you're after.