这篇文章主要介绍了JS实现带鼠标效果的头像及文章列表代码,涉及JavaScript响应鼠标事件动态切换页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS实现带鼠标效果的头像及文章列表代码。分享给大家供大家参考。具体如下：
这是一种带图片功能的文章或新闻列表功能，鼠标滑过标题列表显示说明和图片，多见于SNS交友网站，不过你喜欢的话，你完全可以用哦。
运行效果截图如下：
在线演示地址如下：
http://demo.html.cn/js/2015/js-mouse-style-face-article-list-demo/
具体代码如下：
鼠标滑过标题列表显示说明和图片 *{margin:0;padding:0;font:normal 12px 宋体;} .wrapper{width:300px;height:auto;overflow:hidden;border:1px solid #fdd78d;background:#ffecc6;padding:5px;} /*平常的状态*/ dl{width:100%;height:auto;clear:both;overflow:hidden;margin:8px 0px 8px 0px;} dl dt{display:none;} dl dd{} dl dd strong{float:left;margin-right:5px;} dl dd div{float:left;width:270px;list-style-type:none;} dl dd div h4{clear:both;font-weight:normal} dl dd div h4 a{float:left;color:#795601;font-size:12px;font-weight:normal;text-decoration:none;} dl dd div h4 a:hover{color:#f00;text-decoration:underline;} dl dd div h4 span{float:right;width:75px;} dl dd div p{display:none;} /*鼠标划过的状态*/ dl.over{clear:both;height:55px;padding:5px;background-color: #FFFBF4;} dl.over dt{float:right;display:block;} dl.over dt img{border:1px solid #ccc;padding:1px;background:#fff;} dl.over dd{float:left;} dl.over dd strong{font-size:28px;color:red;vertical-align:top;} dl.over dd div{float:left;width:195px;} dl.over dd div h4{clear:both;font-weight:normal} dl.over dd div h4 a{color:#b34408;} dl.over dd div h4 a:hover{color:#f00;text-decoration:underline;} dl.over dd div h4 span{float:right;} dl.over dd div p{clear:both;display:block;margin-top:5px;}
- 01
人气：19045酷站展示
300M独立IP双线空间 100元/年
- 02
人气：34534视频教程
1G全能空间仅99元 免备案
- 03
人气：79789loading素材
网罗网络最新flash动画、素材
- 04
人气：4323flash片头
企业建网站100元起,送源码
- 05
flash动画人气：6456
全国最低价 服务器年付仅2000元
希望本文所述对大家的JavaScript程序设计有所帮助。
以上就是JS实现带鼠标效果的头像及文章列表代码的详细内容，更多请关注本站其它相关文章！
