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

最新推荐文章于 2024-08-05 18:19:21 发布

Ariel_ckr

最新推荐文章于 2024-08-05 18:19:21 发布

阅读量2.8k

点赞数

分类专栏： html+css+js+框架文章标签： mask hover

本文链接：https://blog.csdn.net/Ariel_201311/article/details/82912199

版权

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

摘要由CSDN通过智能技术生成

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

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

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ariel_ckr

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

weixin_32395459的博客

05-30

1285

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

div 蒙层

11-19

2384

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

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

css鼠标悬浮添加蒙层

热门推荐

dengdengda的博客

11-01

1万+

演示效果这是当鼠标移入会在原来的层上显示另一个层的动画，我这个页面里有很多项都需要用这个效果，之前我想用js来实现这个效果，不过弹出来的层的位置不好固定，特别是页面里有太多这个效果，而最麻烦的还是当窗口缩小时弹出的层会乱飘，后来我使用css3动画来实现，不仅在切换间很流畅有一些酷炫的动画效果，而且代码很简洁。 1. 首先在一个.container-detailed的盒子

鼠标悬停 -css如何实现鼠标移至图片上显示遮罩层及文字

小曦的博客

02-20

5499

搜索这个效果的时候，很多人都是用css结合jQuery实现的，其实直接用css也可以实现哦~ 效果前：效果后：代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...

vue 悬停显示另一个div_Vue实现鼠标经过文字显示悬浮框效果

weixin_39603799的博客

12-18

4981

需求在所做的Vue项目中，需要在鼠标移动文字框的时候显示一些详细信息。最终实现的效果如下：鼠标经过button的时候，可以在光标附近显示出一个悬浮框，显示框里面显示时间和值的信息，鼠标移出button元素的时候，这个显示框会消失。分析涉及到鼠标的移动事件。鼠标事件有下面这几种：1、onclick(鼠标点击事件)box.onclick = function(e){console.log(e)}复制代...

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

悟世君子的博客

12-20

3156

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

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

weixin_42644410的博客

05-31

232

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

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

weixin_31510505的博客

05-31

665

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

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

weixin_30482181的博客

01-07

131

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

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

are_gh的博客

12-31

386

鼠标经过实现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.

鼠标悬浮图片出现蒙层，移开蒙层消失样式

sch695241721的博客

01-04

2381

鼠标悬浮在图片上出现蒙层样式。用到jQuery的mouseover和mouseleave方法，不能用mouseover和mouseout两个方法配合，会有闪烁情况，那是浏览器发生冒泡行为。具体思路如下，鼠标悬浮动态给图片增加一个兄弟节点div，给这个div使用相对定位将位置移动到图片上。鼠标移开删除那个生成的div即可。 $(document).on("mouseover",".addimg"...

简单的div蒙层

weixin_30689307的博客

12-22

123

#hidediv{position:fixed;left:0;top:0;width:100%;height:100%;background:#000;opacity:0.7;*filter:alpha(opacity=70);z-index:1;display:none;bottom:0;}$("#userLogin").click(fu...

css hover遮罩层

weixin_30849403的博客

08-31

680

马上月底了, 这个月忙于工作和生活, 没有很好的写一篇博客, 有点忧伤. 为了弥补, 就写点简单的. 最近项目有个需求, 就是鼠标移入的时候显示一个层, 移除的时候这个层消失. 当然层是可以点击进行额外操作的. 项目用的是react,最开始使用的是mounseenter和mounseleave事件, 结果吧出现了点击进入另外一个路由后,再次点击回来后, 鼠标在元素上, 确没有再出现浮层. 这就有尴...

css3实现鼠标移入div则子div动画移出一排代码实现

04-12

可以使用CSS3中的伪类:hover来实现鼠标移入子div的效果。具体实现代码如下： HTML代码： ``` <div class="parent"> <div class="child">子div1</div> <div class="child">子div2</div> <div class="child">子div3</div> </div> ``` CSS代码： ``` .parent { display: flex; /* 设置弹性布局 */ } .child { width: 100px; height: 100px; background-color: red; transition: transform 0.5s; /* 设置动画过渡效果 */ } .child:hover { transform: translateX(50px); /* 子div向右移动50像素 */ } ``` 当鼠标移入子div时，该子div就会向右移动50像素。