title: Pointer events functionality using jQuery?
body: <p>I am trying to recreate the pointer-events functionality using jQuery since pointer events doesn't work on IE and Opera.</p>
  
  <p>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:</p>
  
  <p>Any idea how to do this in jQuery? I tried few things(like removeClass,mouseout etc) but couldn't get there:</p>
  
  <p>jQuery(attempt):</p>
  
  <pre><code>$(".soc1").hover(function(){ $(".soc1").removeClass("t1") });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="soc1"&gt;&lt;a href="#" target="_blank" class="soc1"&gt;&lt;span class="t1"&gt;link&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.soc1 a:hover &gt; .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;
  }
  </code></pre>