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>
时间： 2024-10-21 05:28:56