html实现鼠标移过为div蒙上一层面纱

最新推荐文章于 2024-05-29 09:28:06 发布

原创

最新推荐文章于 2024-05-29 09:28:06 发布 · 2.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#mask #hover

本文介绍如何使用HTML和CSS实现鼠标悬停时为Div添加蒙版效果。通过设置position、absolute定位以及display属性控制蒙版的显示与隐藏，轻松达到预期的交互体验。

实现效果：
在这里插入图片描述
鼠标移过时：

这种效果我们经常会看到吧，那看看代码是怎么实现的：

<div class="box">
    <img src="../img/1.jpg">
    <div class="meta">文字文字文字</div>
    <div class="cnt">

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ariel_ckr

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

从菜鸟到大神：VSCode助力HTML开发全攻略

邓邓子的博客

04-27

2767

本文全面介绍 VSCode 在 HTML 开发中的高效应用。先引导读者完成 VSCode 的安装与个性化设置，助其快速适应开发环境；接着推荐 Live Server、Prettier 等实用插件，实现实时预览、代码格式化等功能，提升开发效率。通过详细的开发实战步骤，从新建文件到添加样式，带领读者掌握 HTML 基础结构与常用标签使用。还分享代码片段管理、多人协作等进阶技巧，解决常见开发问题。旨在帮助开发者利用 VSCode，轻松高效完成 HTML 开发，打造优质网页。

JavaEE-v4.0-HTML-授课

InLoadwetrust的博客

02-09

656

JavaEE-v4.0-HTML-授课 1 HTML快速入门 1.1 网页的介绍网络世界已经跟我们息息相关，当我们打开一个网站，首先映入眼帘的就是一个个华丽多彩的网页。这些网页，不仅呈现着基本的内容，还具备优雅的布局和丰富的动态效果，这一切都是如何做到的呢？前端入门课程，为您一层层的揭开网页的面纱。网页的构成 HTML：用来制作网页基础内容和基本结构。 CSS：用来制作网页美化效果。 JavaScript：用来制作网页动态效果。 1.2 HTML的介绍 1.2.1 HTML的介绍 HTML（

参与评论您还未登录，请先登录后发表或查看评论

css hover遮罩层效果

辞忧*的博客

03-15

1501

运用css方法达到鼠标移入文字消失，图片占满，遮罩层展示。用到了transition （过渡）、 position（定位）、opacity（透明度）等效果图 html <div class="hot-product3"> <a href="javascript:;" target="_blank" class="item"> <div class="img"> <img src="../images/bg.p.

纯CSS实现鼠标悬停出现遮罩层

zg0601的博客

11-17

4755

CSS实现鼠标悬停出现遮罩层——遮罩层只有背景颜色和既有背景颜色又有背景图片的情况

用hover实现图片遮罩层的出现和消失

qq_43296909的博客

04-30

3255

用hover实现图片遮罩层的出现和消失 html部分我在这里建立了三个盒子，可以看出div1里面包含div2和div3,div2和div3都是遮罩层。 遮罩层必须放在大盒子的里面 <div class="div1"> <div class="div2"> </div> <div class="div3"> </...

div 蒙层

11-19

2465

今日做了一个简单的DIV蒙层的demo 具体如下： 1、js代码 function createIframe(){ //mask遮罩层 var newMask=document.createElement("div"); newMask.id="mDiv"; newMask.style.position="absolut

简单的CSS3鼠标滑过图片标题和遮罩层动画特效

ardq77430的博客

08-12

553

此文转自：http://www.cnblogs.com/w2bc/p/5735300.html，仅供本人学习参考，版权归原作者所有！这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特效。该鼠标滑过特效通过CSS3transitions 和 transform 属性，在鼠标滑过图片时制作遮罩层和图片标题动画效果。在线预览源码下载使用方法...

html照片缩略图

最新发布

03-26

为了使整体外观更加吸引眼球，在原有基础上再叠加一层半透明背景色作为“面纱”，只有当触发事件（比如点击或悬浮）才会显现出来。 ```css /* 新增类名 .mask 来表示隐藏状态下的附加内容区域 */ .mask { position...

基于jQuery的Revealing图片展示效果实现

HTML部分负责构建基本的内容结构，一般包括一个包裹容器（如`<div class="image-item">`）、缩略图图像标签（`<img src="thumbnail.jpg" alt="Thumbnail">`）、信息区域（可能包含标题、描述文本等）以及一个明确...

html5 图片 遮罩层,6种炫酷的鼠标滑过图片显示遮罩层特效

weixin_32395459的博客

05-30

1370

这是一款使用jQuery和CSS3制作的炫酷的鼠标滑过图片显示遮罩层特效。该图片制作层特效共6种不同的效果，使用一些简单的jQuery代码和CSS3过渡效果来完成，简单实用，可以为网站图片添加非常不错的效果。制作方法HTML结构该图片遮罩效果的基本HTML结构如下： +x...在上面的.close-overlay标签是一个关闭按钮，它用于在移动触摸设备中关闭遮罩层，在大屏幕显示器中你...

css-鼠标移入出现遮罩层样式

xxuxioxx的博客

01-18

876

鼠标移入出现遮罩层样式

html鼠标经过有遮罩层,CSS实现鼠标悬浮出现遮罩层示例源码

weixin_29743373的博客

05-30

468

先来一个简单的实现方法：复制代码代码如下:Document.mask-wrapper {position: relative;overflow: hidden;}.mask-inner {position: absolute;left: 0;top: 100%;width: 100%;height: 100%;-moz-transition: top ease 200ms;-o-transitio...

css 实现鼠标移入图片显示遮罩层

悟世君子的博客

12-20

3367

css 实现鼠标移入图片显示遮罩层 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .image-div { width: 300px; height: 300px; position: relative; } .image-div i..

css 实现鼠标停放显示遮罩层的内容

weixin_53105591的博客

05-29

291

【代码】css 实现鼠标停放显示遮罩层的内容。

html5遮罩效果鼠标悬停,jquery和css3方向感知鼠标滑过图片遮罩效果

weixin_42644410的博客

05-31

284

这个教程是教你如何使用jQuery和css3制作一个可以感知鼠标方向的hover图片遮罩层效果。html结构使用一个无序列表来包住所有的图片和图片说明。HTML Natalie & Justin Cleaning by Justin Younger无序列表要做成相对定位并且左浮动，图片描述(遮罩层)使用绝对定位。.da-thumbs li {float: left;m...

html div图层置顶,完全CSS实现鼠标移上出现层的效果（超简单）

weixin_31510505的博客

05-31

749

看过许多鼠标事件，都很复杂，太多的文件和繁杂的代码,而且好多都是用js实现，加载速度很慢。这几天一直在找一种简单的实现效果，完全 CSS编写的效果，现在找到了，非常的少。这就是完全 CSS实现的层效果，真的很不错的，稍微美化一下就非常好了。希望大家多提意见……CSS.demo ul{position:relative;padding:0;margin:0;font-size:12px;}.demo...

酷炫的鼠标滑过添加遮罩层效果

weixin_30482181的博客

01-07

174

　　今天，没错又是今天，今天做的事情还真是多呢~还修了洗衣机，貌似除了写代码不行，样样都行了呢~ 　　好了，言归正传。今天在浏览一个网页时，鼠标滑过它的图片，出现了一种我感觉很酷炫的效果。像这样：　　自己感受下~ <!DOCTYPE html> <html lang="en"> <head> <meta chars...

鼠标移入显示遮罩层

遥舟客

10-05

2131

css鼠标移入元素在上方显示遮罩层到底是怎么做的呢？今天就由我来为大家解答这个问题，在这里我用两种方法来写一下，有需要的小伙伴记得收藏，以备不时之需… 第一种方法：第一种方法就是给需要遮罩层的元素同级再添加一个元素来达到这样的效果，让我们看一下代码怎么写： html代码： <div class="box"> <a href="http://materials.windfish.cn/jxy1-video.mp4" target="_blank">

鼠标经过实现10种效果的遮罩层

are_gh的博客

12-31

433

鼠标经过实现10种效果的遮罩层 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .box { float: left; position: relative; width: 300px; height:300px; border: 3px solid #000; border-radius.

实现鼠标悬停弹出DIV层的jquery实例教程

本文将详细介绍如何利用jQuery实现鼠标悬停在按钮上弹出DIV层页面，以及鼠标离开后层消失的效果。 #### jQuery基础知识 jQuery是一个快速、简洁的JavaScript库，它封装了JavaScript常用的功能代码，提供了一套易用...