网页开发中，鼠标滑过文字悬浮出现的应用还是很广泛的，该种效果的专业术语成为“遮罩层”。例如在一些电商网站或者新闻网站中，需要对某张图片添加文字信息或者内容时，就会用到这个效果。那么今天这篇文章 w3cschool 小编就来教你 CSS 如何实现鼠标滑过文字出现效果。

先让我们来看下实现效果：当鼠标滑过图片时，文字出现；鼠标离开时，文字消失。

实现思路：

先对照片和文字内容设置样式，将文字的可见设置为不可见visibility: hidden。之后加上hover样式。.photo:hover .text

具体代码：

鼠标滑过文字出现 - 编程狮(w3cschool.cn)

.photo{

width: 428px;

height: 100px;

overflow: hidden;

position: relative;

}

.photo .text{

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

background-color: rgba(0, 0, 0,.4);

color: white;

text-align: center;

visibility: hidden;

}

.photo:hover .text{

visibility: inherit;

}

悬浮文字

以上就是 CSS 如何实现鼠标滑过文字出现效果的全部内容。更多 CSS 效果学习请关注 w3cschool 官网。

html中划过鼠标滑过上方英文,CSS如何实现鼠标滑过文字出现效果？相关推荐

css鼠标经过图片镜像翻转,css代码实现鼠标指向图片翻转效果
烈火网(Liehuo.Net)教程今天有读者询问制作鼠标经过时切换图片的效果,这种效果也称为"翻转"效果(roll-over).原来这种效果大多使用Javascript实现,实际 ...
html如何设置鼠标选中状态,怎么用CSS 设置当鼠标移动到菜单时,该按钮变色,鼠标点击后,页面停留在鼠标滑过时的状态!!很急!...
用javascript就可以,基本代码在下面,你自己照着改吧 html head meta http-equiv=Content-Type content=text/html;charset = gb ...
Qt实现类似金山快译那种鼠标移到上方移动滑出的窗口（钩子函数）
首先说移到屏幕上方是在windows上操作的,所以必须用到windows自己的api,这里用到了Windows的钩子函数: HHOOK WINAPI SetWindowsHookEx( __in in ...
html5 css3鼠标滑过效果,Hover.css纯CSS3鼠标滑过特效动画库
Hover.css是一款非常简单实用的纯CSS3鼠标滑过特效动画库.有100多种效果可以选择,包括:2D动画.背景动画.边框动画.图标动画.发光渐变.阴影.对话框.折角等100多种特效. 使用方法首 ...
easyui treegrid idField 所在属性中值有花括号（如Guid）当有鼠标事件时会报错，行记录一下...
easyui treegrid idField 所在属性中值有花括号(如Guid)当有鼠标事件时会报错,行记录一下转载于:https://www.cnblogs.com/xiaoruilin/p/6 ...
在网页中引用DWG控件，交互绘图，和响应鼠标点击对象的方法
在网页中引用DWG控件,交互绘图,和响应鼠标点击对象的方法 [MXDRAW CAD控件文档] 下面帮助的完整例子,在控件安装目录的Sample\Ie\iedemo.htm中. 主要用到函数说明 A. ...
UE4(unreal Engine)中使用蓝图类Actor创建开关门，并使用鼠标和键盘控制开关门
UE4系列文章目录文章目录 UE4系列文章目录前言一.具体步骤 (一)自动开关门 (二)使用键盘开关门 (三)使用鼠标开关门总结前言上一节中我们讨论了用蓝图来控制开关门,虽然可以实现效果, ...
从逻辑分区中划出主分区
从逻辑分区中划出主分区背景: 我最近准备在一台安装了Windows XP 的机器上,再装一个其他操作系统,当然这个操作系统和微软没有任何关系.在查阅了很多资料后,得知该操作系统的安装有如下的要求. ...
python三维图视角旋转_如何在python中旋转3d图？（或作为动画）使用鼠标旋转三维视图...
我有这段代码,其中包含一个3D图.我在Spyder中运行代码;我想知道是否可以使这个绘图旋转(360度)并保存. 谢谢! P.s.对不起,如果这是一个愚蠢的问题,但我是Python的newby.如何在 ...
Windows中多指针输入技术的实现与应用(4多鼠标输入的底层实现)
Windows中多指针输入技术的实现与应用(4多鼠标输入的底层实现) 湖南大学谢祁衡 2 多鼠标输入的底层实现 2.1 通过开发过滤式鼠标驱动的实现此技术最先由M.Westergaard在[9]中 ...

html中划过鼠标滑过上方英文,CSS如何实现鼠标滑过文字出现效果？

悬浮文字

html中划过鼠标滑过上方英文,CSS如何实现鼠标滑过文字出现效果？相关推荐

最新文章

热门文章