Pointer events functionality using jQuery?

Question

I am trying to recreate the pointer-events functionality using jQuery since pointer events doesn't work on IE and Opera.

I have a div that when hovered another div shows up above it and having pointer-events is crucial so that when the div above is hovered the animation doesn't trigger:

Any idea how to do this in jQuery? I tried few things(like removeClass,mouseout etc) but couldn't get there:

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

[A link to mozilla's documentation for those who don't know what `pointer-events` is;](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) Relevant question: [How to make Internet Explorer emulate `pointer-events:none?`](http://stackoverflow.com/q/9385213/1935077) — Petr R., Aug 31 '13 at 19:20
Look at this post that has a great answer for your question: http://stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie — Grant Timmerman, Sep 08 '13 at 00:13

score 2 · Answer 1 · answered Sep 10 '13 at 19:18

jQuery's .hover requires two functions: The first is when the mouse enters (hovering), and the 2nd is 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 "named anonymous functions". I think it's nice to have names on anonymous functions for clarity in the stack trace, but many prefer to keep them unnamed.

Pointer events functionality using jQuery?

1 Answers1