WEB前端开发人员交流社区

搜索
查看: 985|回复: 0

[JavaScript] 列表鼠标HOVER切换效果

[复制链接]

94

主题

150

帖子

148

积分

管理员

会在前端的道路上一直走下去!

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

积分
148

社区QQ达人

发表于 2016-1-14 22:49:23 | 显示全部楼层 |阅读模式
今天给一个专题页面写的一个小功能
效果如下图的右侧红框,是一个鼠标划过显示帖子详情,也没有什么很流弊的东西,就是为了记录下次使用

CSS代码
[CSS] 纯文本查看 复制代码
.module.cl.xl ul li span{
display: inline-block;
width: 18px;
text-align: center;
border: 1px solid #ccc;
color: #FF001E;
font-weight: 600;
margin-right: 5px;
}
.xl li {
margin: 0;
}
.slidebar{
bottom:5px!important;
left:10px!important;
}
.cl.xld dd{
float:left;
display:none;
margin:0;
}
.cl.xld dd img{
width:80px;
height: 70px;
}
#picList li.hover dd ,#picList li.hover hr{
display:block;
}
#picList li hr{
display:none;
}
.cl.xld dd:nth-child(3){
width: 200px;
margin: 5px;
line-height: 20px;
}
.slidebar li {
float: left;
margin-right: 1px;
padding:2px;
width: 116px;
height: 70px;
line-height: 20px;
text-align: center;
font-size: 10px;
cursor: pointer;
}
.slidebar li img{
width:100%;
height:100%;
opacity:0.3;
}
.slidebar li.on{
border:2px solid #fff;
padding:0;
}
.slidebar li.on img{
opacity:1;
}

HTML代码

[HTML] 纯文本查看 复制代码
<div class="module cl xl">
<ul id="picList">
<li>
	<dl class="cl xld">
		<dt><span>1</span><em>02-13</em><a href="#" title="这里是列表">这里是列表</a></dt>
		<dd><img src="image/s.jpg" width="80" height="70" /></dd><dd>这里是简介内容一二三四五六七八九</dd>
	</dl> 
	<hr class="da" />
</li>
<li>
	<dl class="cl xld">
		<dt><span>1</span><em>02-13</em><a href="#" title="这里是列表">这里是列表</a></dt>
		<dd><img src="image/s.jpg" width="80" height="70" /></dd><dd>这里是简介内容一二三四五六七八九</dd>
	</dl> 
	<hr class="da" />
</li>
</ul>
</div>

JS代码
[JavaScript] 纯文本查看 复制代码
	var lis=picList.getElementsByTagName("li");
	for (var i=0;i<lis.length ;i++ )
	{	lis[0].className="hover";
		lis[i].onmouseover=function(){
			for (var n=0;n<lis.length ;n++ )
			{
				lis[n].className="";
			}
			if(this.className==""){
				this.className="hover";
			}
		}
	}

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



Archiver|手机版|小黑屋|前端开发技术交流

Copyright © 2009-2015 前端开发技术交流 http://www.fedte.cn 版权所有 All Rights Reserved.

免责声明: 本社区不承担任何由社区会员所提供的信息和工具所引起的争议和法律责任。

GMT+8, 2021-1-20 05:41

快速回复 返回顶部 返回列表