首页 > 代码库 > 1.鼠标点击换样式+2.下拉菜单缓慢显示/隐藏样式效果
1.鼠标点击换样式+2.下拉菜单缓慢显示/隐藏样式效果
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=" width: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>
1.鼠标点击换样式+2.下拉菜单缓慢显示/隐藏样式效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。