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>






 


 




 




 







    
posted on 
2016-10-13 10:56 
向前看！明天会更好！ 
阅读(387) 
评论(0) 
编辑 
收藏 
举报