jQuery实现鼠标滑过Div层背景变颜色的方法
jQuery实现鼠标滑过Div层背景变颜色的方法
发布时间:2016-12-30 来源:查字典编辑
摘要:本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:jQuery实现感...

本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法。分享给大家供大家参考。具体实现方法如下:

复制代码 代码如下:<html>

<head>

<title>jQuery实现感应鼠标经过Div层变换图层背景颜色)</title>

<style type="text/css">

.divbox{

height:300px;

width:200px;

background:#ffffff;

border:solid 1px #ccc;

float:left;

margin-right:10px;

}

.divOver{

background:#eff8fe;

border:solid 1px #d2dce3;

}

#zztj{color:#ffffff;}

#zztj a,#zztj a:link,#zztj a:visited,#zztj a:active {color:#ffffff;}

#zztj a:hover {color:#ffffff;}

</style>

<script src="http://www.jb51.netimages/jquery.js"></script>

<script language="javascript">

$(function(){

//当鼠标滑入时将div的class换成divOver

$('.divbox').hover(function(){

$(this).addClass('divOver');

},function(){

//鼠标离开时移除divOver样式

$(this).removeClass('divOver');

}

);

});

</script>

</head>

<body>

<div id="menu">

<div>区块A</div>

<div>区块B</div>

<div>区块C</div>

</div><br>提示:如果不显示预览效果,请<font color=red>刷新一下本页面</font>,因调用了远程的jquery插件,需要加载完成才能运行。

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类