1.鼠标点击换样式
<style type="text/css"> .aa{ width:90px; height:60px;text-align:center; vertical-align:middle; line-height:60px; margin-right:10px; font-size:19px; float:left; background-color:#06F} </style> <body> <div style=" 990px; height:60px; background-color:#F0F;"> <div class="aa" style="border-bottom:2px solid #F00;">点击1</div> <div class="aa">点击2</div> <div class="aa">点击3</div> <div class="aa">点击4</div> <div class="aa">点击5</div> </div> </body> <script type="text/javascript"> $(document).ready(function(e) { $(".aa").click(function() //aa的点击事件 { $(".aa").css("color","#000"); //div元素"aa"在被点击之前的字体颜色 $(".aa").css("font-weight","400"); //div元素"aa"在被点击之前的字体粗细 $(".aa").css("border-bottom-style","solid"); //div元素"aa"在被点击之前的下边框样式 $(".aa").css("border-bottom","1px"); //div元素"aa"在被点击之前的下边框粗细为1PX $(this).css("color","red"); //被点击的这个元素在被点击之后的字体颜色 $(this).css("font-weight","bold"); //被点击的这个元素在被点击之后的字体粗细 $(this).css("border-bottom","2px"); //被点击的这个元素在被点击之后的下边框粗细为2PX $(this).css("border-bottom-style","solid"); //被点击的这个元素在被点击之后的下边框样式 $(this).css("border-bottom-color","red"); //被点击的这个元素在被点击之后的下边框颜色 }) });
2.下拉菜单缓慢显示/隐藏样式效果：
<style type="text/css"> *{ margin:0px auto; padding:0px;} #a{ width:1000px; height:60px; background-color:#6F6;} #b{ width:100px; height:60px; background-color:#03C; float:right; font-size:24px; text-align:center; cursor:pointer; color:#F00;} #c{ width:1000px; height:300px; background-color:#CF0; position:absolute; top:60px; left:182px; margin-top:-2px; z-index:2; display:none;} #d{ width:1000px; height:600px; background-color:#9FF;} </style> <body> <div id="a"> <div id="b"> 鼠标移动<div id="c">显示/隐藏</div> </div> </div> <div id="d"></div> </body> <script type="text/javascript"> $(document).ready(function(){ //c为下拉菜单，b为点击事件的div元素，show：多长时间能完全显示，hide：多长时间完全隐藏 $(".c").mouseenter(function(){ $(".c").show(); //鼠标放在下拉菜单上时下拉菜单一直显示，实现当鼠标放在/(mouseenter)下拉菜单上时/(show)，下拉菜单不消失所以show不设置延迟时间 }); $(".c").mouseleave(function(){ //鼠标离开离开下拉菜单时，下拉菜单在450毫秒内完全隐藏 $(".c").hide(450); }); showxiala(); $(".b").mouseleave(function(){ $(".c").hide(550); }); }); function showxiala() { $(".b").mouseenter(function(){ //当鼠标移入到点击事件的div元素上时 $(".b").unbind("mouseenter"); //先取消mouseenter绑定的事件 $(".c").show(550); //然后执行“c”在550毫秒之后缓慢出现 window.setTimeout("showxiala()",1500); //隔1500毫秒之后再调用自己/也指在1500毫秒之内function showxiala()没有效果 }); } </script>