2个回答
展开全部
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<style>
ul,li{list-style:none;margin:0;padding:0;}
li{width:287px;height:287px;position:relative}
li a{display:block;width:100%;height:100%; position:absolute;top:0;left:0;}
li a:hover{background:#f00;}
.box{width:0;height:287px; position:absolute;left:0;top:0;background:#f00; overflow:hidden;}
li:hover .box{width:287px;height:287px;-webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;-ms-transition:all .3s ease-in;-o-transition:all .3s ease-in;transition:all .3s ease-in;}
</style>
<ul>
<li><img src="http://img0.bdstatic.com/img/image/shouye/lyj/huzi.jpg"><div class="box"><span>哈哈哈哈哈哈哈</span></div></li>
</body>
</html>
追问
对，我就是要这种效果，鼠标悬浮时样式可自定义改变颜色和出现方向么，比如浅蓝透明的，，，从上往下。伪类中出现的红色是图片还是整个框架的颜色？、我试着该动你的代码但是效果还是一样。。。我会加分的饿呢 第十五行看不懂.....
追答
15句就是，鼠标移上li的时候，li里的的div class=box就会宽度是287px，效果是滑入，时间是3s
因为上面box定义宽度是0，所以看起来就像是一整块滑进来一样。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
