Functionality of pointer events using jQuery?

Question

I am trying to recreate the functionality of event pointers with jQuery, since pointer events do not work on IE and Opera.

I have a div that, when you hover another div over it, appears above it, and the presence of pointer events is crucial, so when the div above hangs, the animation does not start:

Any idea how to do this in jQuery? I tried several things (e.g. removeClass, mouseout, etc.), but could not get:

JQuery (attempt):

$(".soc1").hover(function(){ $(".soc1").removeClass("t1") }); 

HTML:

 <div class="soc1"><a href="#" target="_blank" class="soc1"><span class="t1">link</span></a></div> 

CSS

 .soc1 a:hover > .t1{ margin-top:-30px; opacity:1; } .t1{ position:absolute; font-style:normal; letter-spacing:0px; display:block; padding:4px; font-family:Verdana, sans-serif; font-size:10px; color:#fff; background-color:#090909; opacity:0; margin-left:2px; margin-top:-40px; pointer-events:none; cursor:default; } 

Answer 1

jQuery.hover requires two functions: the first - when the mouse enters (freezes), and the second - when the mouse leaves (stops hovering)

 $(".soc1").hover(function mouseEnters() { $(".soc1").removeClass("t1"); }, function mouseLeaves() { $(".soc1").addClass("t1"); }); 

Note: the names "mouseEnters" and "mouseLeaves" are optional. These are "anonymous functions." I find it nice to have names in anonymous functions for clarity in the stack trace, but many prefer them to be unnamed.