0

I have used JQuery to add a class to an element(.bg1) when the user hovers over another element (.box1). This works fine on desktops my problem is that when viewed on a mobile device because mobiles do not have a mouse, the hover effect can only be seen when the user taps the screen.

This would be fine if it was just a soft touch. The strange thing is that I also have another div that when hovered it changes an element. In this case it is a child element so I used the css :hover pseudo class to achieve this and it works perfectly on desktops and mobiles. However the jQuery .hover seems to act differently from the css :hover.

Is there a way to have the jQuery .hover act the same as the css :hover.

jQuery('.box1').hover(
       function(){jQuery('.bg1').addClass('shown') },


 function(){jQuery('.bg1').removeClass('shown') }     
);
高鵬翔
  • 1,997
  • 2
  • 8
  • 21
kyle walker
  • 15
  • 5

1 Answers1

0

What you should do is add a separate class for jQuery :hover states, and combine it with your :hover selector .class:hover, .class.jqHover { the hover code }

Then you'd just toggle that class on jQuery hover instead, as you cannot force dynamic pseudoclasses with jQuery.

See this answer for more information on it.

Joel Hager
  • 2,990
  • 3
  • 15
  • 44