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.

jQuery on hover event does not work

I have a site where I have some divs with hidden divs inside. What I am trying to do is to show the hidden divs when I hover over the parent div. I can't use CSS3's :hover because I need to support ie6. So I used jquery. which does not work for me.
Here is an example: JSFiddle
$('#front-container').on("hover", "#jobs-by-cat .job", function () {
$(this).find('.hover').toggleClass('hidden');
});
And this is how it should look on hover: JSFiddle
The #jobs-by-cat div is dynamically changed so the selection must be made like that.

There is no event called hover, the .hover() function is a shortcut to register mouseenter and mouseleave event handlers, so you need to use it
$('#front-container').on("mouseenter mouseleave", "#jobs-by-cat .job", function () {
$(this).find('.hover').toggleClass('hidden');
});
Demo: Fiddle

As per the jQuery docs for .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
So you need to replace with mouseenter and mouseleave events:
$('#front-container').on("mouseenter mouseleave", "#jobs-by-cat .job", function () {
$(this).find('.hover').toggleClass('hidden');
});

Try with "mouseenter" and "mouseleave" events.
$('#front-container').on("mouseenter mouseleave", "#jobs-by-cat .job", function () {
$(this).find('.hover').toggleClass('hidden');
});

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

jquery click event tr or input clicked

I have the following code:
$(document).ready(function () {
$("tr").live('click',function(){
alert("TR");
});
$("input").live('click',function(){
alert("INPUT");
});
});
Fiddle here
How can I just trigger the click function for the checkbox without triggering the tr function? Is there any solution with jQuery?
I will not set return false at the end of the input function and I really need the tr element too.
Info: event.stopPropagation doesn't work on live() events.

You can use the stopPropagation() method on the event object.
It will prevent the event from bubbling up without cancelling the default event behavior.
$(document).ready(function () {
$("tr").click(function(){
alert("TR");
});
$("input").click(function(e){
alert("INPUT");
e.stopPropagation();
});
});
As it seems you are using .live() and not direct event binding, you can't use stopPropagation().
First of all, .live() is legagcy code and has been deprecated, which means it could be removed from the library in any future new version. I don't know which version of jQuery you are using but you should consider moving to the latest (which is more optimized anyway) and use .on() for event delegation.
Nevertheless, if you can't upgrade your jquery library, here's maybe a solution to your problem. The event parameter passed to all event handler contains a property target which reference the element from which the event was initiated. So you could do something like:
$("tr").live('click',function(e){
if (e.target.nodeName !== "INPUT") {
// if ($(e.target).is('input') === false) { // jquery style but maybe less efficient
alert("TR");
}
});
Not very elegant but does the trick. Here's an example.
The problem with .live() is that events are binded to the document so as more complex as your application would become, you may end up with headaches to stop propagation.
In the meantime I've made a fiddle using .on() (here) and one using .delegate() (here).

You need to add stopPropagation() to your input click handler. It will stop the event bubbling up the DOM to parent elements.
$(document).ready(function () {
$("tr").click(function(){
alert("TR");
});
$("input").click(function(e){
alert("INPUT");
e.stopPropagation();
});
});
Example fiddle
OP Updated Question:
$(document).ready(function () {
$("TABLE").delegate("tr", 'click',function() {
alert("TR");
});
$("TABLE").delegate("input", 'click',function(e) {
e.stopPropagation();
alert("INPUT");
});
});

Use stopPropagation() for input handler
http://jsfiddle.net/KJg6Q/

http://jsfiddle.net/LwvYD/2/
e.stopPropagation() in handle on input or use e.relatedTarget
$("tr").click(function(e){
if( e.relatedTarget.tagName != "input" )
alert("TR");
});