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.
Related
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.
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.
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');
});
Have this code wrapped in HOVER Event...
$("#div_ID").hover(function() {
// perform stuff here...
}
);
I'd like to trigger the above when I click a link using the ONCLICK Event...
$("anchor_ID").click (function() {
$("div_ID").trigger('hover'); // Not sure if this is even correct
}
);
It's not working though. How can I accomplish this? Is it even possible?
Using JQuery only on FF v16, IE8, and GC v23
How about this:
var dosomething = function() {
// perform the stuff here
}
$('#div_ID').hover(dosomething);
$('anchor_ID').click(dosomething);
But if you are set on using .trigger, your problem might be that you forgot to include # before div_ID. And change hover to mouseenter (the "hover" function in jQuery is just a shortcut for "mouseenter" -- credit to #FabrícioMatté for catching that) That is:
//change this:
$('div_ID').trigger('hover');
//To this:
$('#div_ID').trigger('mouseenter');
Same might apply to anchor_ID, but I won't know unless you post your HTML.
Update: another suggestion from #FabrícioMatté: the this keyword inside of dosomething might be a bit confusing when you call it as shown above, so watch out for it. The this keyword will work differently than using .trigger, so it's just a heads up....
hover is not an event so you can't trigger it. .hover() is just a shorthand which attaches mouseenter and mouseleave handlers.
$("#anchor_ID").click(function() {
$("#div_ID").trigger('mouseenter');
});
Fiddle
Note that .hover when passed a single argument will attach the function to both mouseenter and mouseleave so you can trigger either of these.
I'd recommend attaching the handler with mouseenter instead of hover if you intend to execute the handler only when users move their mouse above the div.
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.