drayarms Posted September 15, 2011 Share Posted September 15, 2011 Good day folks. Yes I know it all sounds too familiar. I just started working with jQuery and up to this moment, thought it was the magic bullet to solving most cross browser issues. Well while working on this page, I realized to my horror that onmouseover wouldn't work with IE . After doing some online searches, I learned that the hover function does work with IE but even after trying that too, Microsoft's browser still wouldn't implement this fine piece of programming genius. Well what Im trying to do is simply increase the opacity of an element from 0 to 1 (ie make it transparent) when the mouse is rolled over it, and take it back to 0 when the mouse is removed. The element has the class name "menu_decor" and here is the code i did to achieve this. I will just include the hover function in the head section and the onmousover as an inline call (doing it either way works). To keep it simple, I would exclude the css sheet, but the defualt value for the element is set to 0 according to the css, so that when the page is loaded, it appears transparent. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type = "text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script> <script type='text/javascript'> $(document).ready(function(){ $(".menu_decor").hover(function() { $(this).css("opacity","1.0"); }, function() { $(this).css("opacity","0"); }); }); </script> </head> <body > <td > <a href ="" > <div class = "menu_decor" onmouseover = "$(this).css('opacity','1.0');" onmouseout = "$(this).css('opacity','0');"> </div> </a> </td> </body> </html> So my question is, how can this be made to work with IE if at all? Thanks for any suggestions. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.