I did something with an overlay on a button and my code doesn't work in IE 10

was trying to clean up my css and javascript and i went too far. while this code works on chrome safari and firefox it went nuts in IE10. 

Do you know what is going wrong here? 

<divid="bgmbutton1"><imgid="button1"src="http://translationgames.org/images/button1overlay.png"alt="Translation games"><imgid="obutton1"src="http://translationgames.org/images/button1.png"alt="Translation games"><divid="otrigger1"class="button"data-case="translation"></div></div>

#bgmbutton1 {
    
    
    
}
#button1 {
    width: 25%;
}
#obutton1 {
    width: 25%;
    
    
    
}
#otrigger1 {
    height:100%;
    width:100%;
    
    
    
    cursor: pointer;
    
}
//rollover of the main interface four buttons (translate art textile about)
 $('[id^=otrigger]').hover(function () { 
      var roll = $(this.id.replace(/otrigger/, '#obutton'));
       roll.fadeToggle({
        duration: 300
      });
   });
I have a jsfiddle too but it doesn't allow me to post links in this place