cursor:pointer doesn't work on a transparent trigger overlay? -

Is there a problem with the cursor in IE10? It does not appear at all in IE10

  & lt; Div id = "bgmbutton1" & gt; & Lt; Img id = "button1" src = "http://translationgames.org/images/button1overlay.png" alt = "translation games" & gt; & Lt; Img id = "obutton1" src = "http://translationgames.org/images/button1.png" alt = "translation games" & gt; & Lt; Div id = "otrigger1" class = "button" data-case = "translation" & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 css  
  # bgmbutton1 {status: fixed; Left: 2%; top 5%; } # Button 1 {width: 25%;} # obutton1 {width: 25%; Status: Absolute; Top: 0; Left: 0;} # Uptigger 1 {Background: RGBA (0,0,0,0,0,0); Height: 100%; Width: 100%; Status: Completed; Left: 0; Top: 0; Cursor: indicator; Z-index: 5000;}    
 
 
 Your approach is just a bit. I can suggest a slightly more straight-forward approach instead. I have tested to make sure that it works fine in IE.  
  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Title & gt; Hover-fading button & lt; / Title & gt; & Lt; Style & gt; .button {width: 100px; Height: 100 pixels; Display area; Status: Relative; }. Button IMG {border: 0; Width: 100%; Top: 0; Left: 0; Status: Completed; Transition: Opacity .5s; }. Button: Hover .default {Opacity: 0; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; One square = "button" href = "#" & gt; & Lt; Img class = "overlay" src = "http://translationgames.org/images/button1overlay.png" alt = "translation games" & gt; & Lt; Img class = "default" src = "http://translationgames.org/images/button1.png" alt = "translation games" & gt; & Lt; / A & gt; & Lt; / Body & gt; & Lt; / Html & gt;   
 As you can see, it depends on the  transition  and  opacity  properties. If you need support for older browsers, you can go back to a JavaScript approach using jQuery:  
    
 I hope this helps you.