Create A JQuery Hover From Two Seperate Functions

Question

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

Rohan Kumar · Accepted Answer · 2013-11-19 07:57:57Z

2

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.

edited Nov 19, 2013 at 7:57

answered Nov 19, 2013 at 7:35

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rajaprabhu Aravindasamy Over a year ago

OP wants to hook hover event for dynamically created element. How direct hooking will do the job here? or am i missing anything.?

Nuvolari Over a year ago

Will this code work for elements created in the future? Your code seems to be missing the live part.

Rajaprabhu Aravindasamy Over a year ago

@Nuvolari Please dont think about live. It was deprecated. Use .On instead.

Nuvolari Over a year ago

Don't worry by 'live' I mean 'On' - its just easier to explain.

Rajaprabhu Aravindasamy · Accepted Answer · 2013-11-19 08:03:54Z

1

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

edited Nov 19, 2013 at 8:03

answered Nov 19, 2013 at 7:44

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

1 Comment

Nuvolari Over a year ago

Hi your code isn't working for me. Hover event isn't being fired.

undefined · Accepted Answer · 2013-11-19 07:35:56Z

-2

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

answered Nov 19, 2013 at 7:35

undefined

2,0933 gold badges26 silver badges48 bronze badges

Collectives™ on Stack Overflow

Create A JQuery Hover From Two Seperate Functions

3 Answers 3

4 Comments

DEMO based on 1.8 and below

DEMO based on latest versions of JQuery

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related