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>