请问这个用遮罩层怎么实现效果（如图）求代码!!!

快乐小宝宝1 2017-03-11 12:03:22

由于自己新手实在搞不定遮罩层希望大神能给代码参考和思路谢谢

...全文

371 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

Go 旅城通票 2017-03-13

打赏
举报

<style>
    .item{width:150px;height:200px;border:solid 1px #ccc;float:left;margin-right:30px;position:relative}
    .item div.mask{position:absolute;left:0;top:0;width:100%;height:100%;opacity:.5;filter:alpha(opacity=50);display:none;background:#000}
    .item div.word{position:absolute;left:10px;top:15px;width:130px;height:170px;color:#fff;border:solid 1px #fff;z-index:10;display:none}
    .item div.word a{position:absolute;background:#fff;width:20px;height:20px;bottom:-10px;text-align:center;left:50%;margin-left:-10px;color:green;font-weight:bold;text-decoration:none;line-height:20px}
    .item:hover div.mask,.item:hover div.word{display:block}
</style>
<div class="item">
    <div class="mask"></div>
    <div class="word">文字<a href="#">+</a></div>
</div>
<div class="item">
    <div class="mask"></div>
    <div class="word">文字<a href="#">+</a></div>
</div>

浪子回头8 2017-03-13

打赏
举报

不用JS的，CSS的hover就能实现，默认状态隐藏，hover时显示，不过还要用到定位

快乐小宝宝1 2017-03-11

打赏
举报

看着是个昵称 2017-03-11

打赏
举报

引用 3 楼 u011354204 的回复:

引用 2 楼 yanluofeihong 的回复:
遮罩本身就存在，设置隐藏，等到鼠标划过的时候，让遮罩显示出来，鼠标离开之后，再把遮罩隐藏起来
求参考代码！！！怎么实现上图的遮罩层效果求参考代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>遮罩效果</title>
	<style>
		.img{
			position: relative;
			width: 128px;
			height: 128px;
			overflow: hidden;
		}
		.zhezhao{
			position: absolute;
			top: 128px;
			left: 0;
			width: 128px;
			height: 128px;
			color: #fff;
			background-color: rgba(0,0,0,.3);
		}
	</style>
</head>
<body>
	<div class="img">
		<img src="images/tou.jpg"/>
		<div class="zhezhao">
			遮罩内的文字
		</div>
	</div>
	<script src="js/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(".img").mousemove(function(){
			$(".zhezhao").animate({
				"top":"0"
			},300)
		})
		$(".img").mouseleave(function(){
			$(".zhezhao").stop(true,true)
			$(".zhezhao").animate({
				"top":"128px"
			},300)
		})
	</script>
</body>
</html>

自己下载jquery文件

快乐小宝宝1 2017-03-11