IE对a能使用hover,但对div等不行,Firefox中都可以,因此我想到了兼容两者的JQuery:
<head runat="server"> <title></title> <link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #tes { height: 97px; width: 435px; background-color: Black; } </style> <script src="JS/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { var co = $("#tes").css("background-color"); $("#tes").bind({ mouseover: function() { $(this).css("background-color", "white"); }, mouseout: function() { $(this).css("background-color", co); } }); }) </script> </head> <body> <form id="form1" runat="server"> <div> <div id="tes"> </div> </div> </form> </body>
为了方便,做成插件,这是第二种:
(function($) { $.fn.setcolor = function(options) { var defaults = { color: 'red' }; var options = $.extend(defaults, options); var co = $(this).css("background-color"); $(this).bind({ mouseover: function() { $(this).css("background-color", options.color); }, mouseout: function() { $(this).css("background-color", co); } }); }; })(jQuery);
页面引用:
<script src="JS/jquery.js" type="text/javascript"></script> <script src="JS/sethover.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#tes").setcolor({ color:'yellow' }); // $("#tes").setcolor(); }) </script>