HTML+CSS 土豆网鼠标经过显示遮罩

！！！当鼠标经过时，让里面的遮罩层显示出来：

.tudou:hover .mask {

display:block;

}//当经过tudou时，显示mask里面被隐藏的东西

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.tudou {position: relative;width: 377px;height: 210px;background-color: palegoldenrod;margin: 100px auto;}.tudou img {width: 100%;height: 100%;}.tudou .mask {/* 隐藏遮罩层 */display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .2);}.tudou .pic {position: absolute;top: 50%;left: 50%;width: 10%;height: 20%;margin-left: -30px;margin-top: -20px;}/* 当鼠标经过时，让里面的遮罩层显示出来 */.tudou:hover .mask {/* 显示元素的意思 */display: block;}</style>
</head><body><div class="tudou"><div class="mask"><div class="pic"><img src="th.jpg" alt=""></div></div><img src="tudou.jpg" alt=""></div>
</body></html>

HTML+CSS 土豆网鼠标经过显示遮罩相关推荐

10.【CSS定位】：position、z-index、dispaly(none)、visibility、overflow hot new 模块 + 淘宝焦点图布局 +土豆网鼠标经过显示遮罩
文章目录 [CSS定位] 一.定位 1.1 为什么需要定位? 1.2 定位组成 1.3 静态定位 static(了解) 1.4 相对定位 relative(重要) 1.5 绝对定位 absolute( ...
案例——淘宝轮播图和土豆网鼠标经过显示遮罩
综合案例 - 淘宝轮播图 1 效果图 5.2 布局分析 3 步骤 1. 大盒子我们类名为: tb-promo 淘宝广告 2. 里面先放一张图片. 3. 左右两个按钮用链接就好了. 左箭头 ...
CSS实线鼠标移入显示隐藏div
用CSS中的 hover 事件,实线鼠标移入显示隐藏元素. 效果如下: 代码如下: <!DOCTYPE html> <html><head><meta cha ...
纯CSS实现鼠标移入显示图标效果
1.效果预览在淘宝或京东商城我们经常看到这样的效果:鼠标移动除某一个位置时出现下拉菜单,或者显示一个图标,那么这是如何实现的呢?我们今天就用CSS来实现鼠标移入时显示图标的一个效果. 下面是我们这次 ...
css实现鼠标覆盖显示大图
html <div <a href="#"> <img src="img01.jpg"> <img src="im ...
鼠标悬停显示遮罩层
HTML部分: css部分: .smallbox {width: 100%;.card {position: relative;top: 0;left: 0;width: 224px;height: ...
【CSS】鼠标移入显示禁用图标
使用elementUI的 Dropdown - 下拉菜单,某些按钮不可点击时,可以使用以下属性为鼠标添加禁用图标. pointer-events: auto !important; cursor: n ...
css实现鼠标悬浮显示禁用图标
以下两种方式都可以实现 cursor:not-allowed; cursor:no-drop;
鼠标hover出现遮罩
鼠标移动到图片上显示遮罩,并且显示一些文字效果: 鼠标没有悬停鼠标悬停分析: 遮罩层主要是以半透明黑色背景为主,加上文字和四根修饰线条,这就是鼠标hover到图片上以后要显示的内容. 先将遮罩内 ...

HTML+CSS 土豆网鼠标经过显示遮罩

HTML+CSS 土豆网鼠标经过显示遮罩相关推荐

最新文章

热门文章