css如何设置鼠标放上图片出现文字-tutorial css-php.cn

css如何设置鼠标放上图片出现文字

WBOY

Lepaskan： 2021-11-15 18:00:43

asal

17129 orang telah melayarinya

css设置鼠标放上图片出现文字的方法：1、给文字元素添加“display:none;”样式使其隐藏；2、使用“父元素:hover 文字元素{display:block;}”语句实现鼠标放在图片上显示文字的效果。

css如何设置鼠标放上图片出现文字

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css设置鼠标放上图片出现文字的方法

1、使用

和定义将在图片上要出现的文字，可以通过

和将 HTML 元素组合起来。

代码如下：

<div>
<span>这是要在图片上出现的文字</span>
</div>

Salin selepas log masuk

2、给div元素添加背景图片，并且设置大小；给文本元素span添加“display:none;”样式使其不显示，代码如下：

background-image:url(图片名称);
width:250px;
height:100px;
background-position:center;

Salin selepas log masuk

display:none;
text-decoration:none;

Salin selepas log masuk

3、使用hover选择器使鼠标放上图片时，文字出现，代码如下;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css" >
.a{
background-image:url(1115.08.png);
width:250px;
height:100px;
background-position:center;
 }
 .a span{
display:none;
text-decoration:none;}
.a:hover span{
display:block;
position:absolute;
top:0;
left:0;
color:blue;}
</style>
</head>
<body>
<div class="a">
<span>这是一副山水画</span>
</div>
</body>
</html>

Salin selepas log masuk

输出结果，当鼠标不在图片上时：

1115.18.png

当鼠标在图片上时：

1115.19.png

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci css如何设置鼠标放上图片出现文字. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

css

sumber：php.cn

Artikel sebelumnya：css怎样设置单词内字母的间距 Artikel seterusnya：19个CSS唯美的边框，让你的项目大放异彩！

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang