2016-04-21 JQuery-浮动窗口

最新推荐文章于 2018-03-27 10:35:51 发布

weixin_30555125

最新推荐文章于 2018-03-27 10:35:51 发布

阅读量83

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liuadou/p/5417643.html

版权

简介：利用Jquery实现浮动窗口背景色变化，即Div背景色的变化。同时，利用text-align:center;padding-top:5px;来实现Div中内容居中

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>JQuery-浮动</title>
<link type="text/css" rel="stylesheet" href=""/>
<style type="text/css">
#div0{z-index:999999;margin-top:200px;position:fixed;}
#div1,#div2,#div3,#div4{width:100px;height:20px;background:#707070;border:0px;color:#FFFFFF;text-align:center;padding-top:5px;font-size:14px;}
#div2,#div3,#div4{margin-top:4px;}
a{color:#FFFFFF;top:5px;}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
//利用JQuery实现div背景色的变化
$(document).ready(function(){
   $("#div1,#div2,#div3,#div4").mouseover(function(){
   $(this).css("background","#E00303");
   }
   );
    $("#div1,#div2,#div3,#div4").mouseout(function(){
   $(this).css("background","#707070");
   }
   );
});
</script>
</head>
<body>
<div id="div0">
<div id="div1">联系我们</div>
<div id="div2">微博微信</div>
<div id="div3">公众平台</div>
<div id="div4">回到顶部</div>
</div>
</body>
</html>

运行结果：

转载于:https://www.cnblogs.com/liuadou/p/5417643.html

weixin_30555125

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2016-04-21 JQuery-浮动窗口

简介：利用Jquery实现浮动窗口背景色变化，即Div背景色的变化。同时，利用text-align:center;padding-top:5px;来实现Div中内容居中<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Generator" ...
复制链接

扫一扫