Applying jQuery hover to multiple elements using jQuery each

Question

I'm trying to get the following working so I can make certain elements of a page reveal others on hover using jQuery. I'm trying to use the data attribute of the hover element to pick the revealed element.

I just can't seem to get this working. Or is there a better way to do this?

function setUpServiceHover(){
 $( ".poster-banners__poster" ).each(function(i) {
  $(this).hover(
   function () {
    $("#service_" + ($(this).data('target')).addClass('intro__service--show'));
    $("#service_" + ($(this).data('target')).removeClass('intro__service--hidden'));
  },
   function () {
    $("#service_" + ($(this).data('target')).addClass('intro__service--hidden'));
    $("#service_" + ($(this).data('target')).removeClass('intro__service--show'));
  })
 });
}

setUpServiceHover();

Appreciate the help.

Thanks.

Bhushan Kawadkar · Accepted Answer · 2018-09-25 12:06:30Z

1

you don't need to iterate for hover effect, just add hover event handler as shown below

NOTE: you need not to put this script inside setUpServiceHover() function and remove this function. You need to put it inside document.ready.. or $(function().. to ensure DOM loaded.

$(function(){
   $(".poster-banners__poster").on("hover",
       function () {
        $("#service_" + ($(this).data('target')).addClass('intro__service--show'));
        $("#service_" + ($(this).data('target')).removeClass('intro__service--hidden'));
      },
       function () {
        $("#service_" + ($(this).data('target')).addClass('intro__service--hidden'));
        $("#service_" + ($(this).data('target')).removeClass('intro__service--show'));
      });
  });

answered Sep 25, 2018 at 12:06

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

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

1 Comment

Bhushan Kawadkar Over a year ago

happy to help you :)

Collectives™ on Stack Overflow

Applying jQuery hover to multiple elements using jQuery each

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related