div+css 鼠标移到图片上显示文字内容?

发布网友发布时间：2022-04-23 17:37

我来回答

共6个回答

热心网友时间：2022-04-19 06:42

1、首先输入：

<!DOCTYPE html>

<html>

<head>

<title>鼠标悬停图片上显示文字在线演示 www.divcss5.com</title>

<style>

img{border:0}/* css 注释说明：设置图片边框为0 */

body{behavior:url("csshover.htc");text-align:center;}/* css注释说明：兼容ie6 支持标签使用hover */

2、然后输入：

.divcss5{ position:relative;width:554px; height:346px;margin:0 auto}

.divcss5 a,.divcss5 span{display:none; text-decoration:none}

.divcss5:hover{cursor:pointer}

.divcss5:hover a.now{cursor:pointer; position:absolute; top:0; width:100%; height:100%;
z-index:100; left:0; display:block;}

.divcss5:hover span{ display:block;position:absolute; bottom:0; left:0;color:#FFF;width:554px;
z-index:10;height:36px; line-height:36px; background:#000;filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;}

/* 设置显示文字定位位置，背景半透明 */

3、然后输入：

</style>

</head>

<body>

</div>

<span>欢迎访问DIVCSS5网站</span>

</div>

</body>

</html>

4、然后就可以了。

热心网友时间：2022-04-19 08:00

1、添加如下图片代码，此时是既没有加Alt标签又没有加Title标签的。

2、页面的图片就可以显示出来了。鼠标放图片上，也不会显示出字。如图所示。

3、加上Alt标签和Title标签。写上alt="图片显示不了显示alt标签" title="鼠标放上去显示" 如图所示的文字。

4、将鼠标放在图片上，就可以显示出title标签上的字了，而alt标签上的字是显示不出来的。

5、当图片发生错误或是不存在时，这里是将原图片名“图片1”改为“图片11”，其它不变。原图片就不存在显示不出来了，如图所示。

6、同样将鼠标放在图片上，就可以看到图片无法显示，而是看到了alt标签上的字了。

热心网友时间：2022-04-19 09:35

div+css 鼠标移到图片上显示文字内容代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="本代码由捷西网络提供">
<title>div+css 鼠标移到图片上显示文字内容</title>
<style type="text/css">
.pic{
width:750px;
height:340px;
background: url(
) no-repeat;
}
.text{
padding:30px;
width:690px;
height:280px;
line-height:36px;
background:#FFF;
opacity:0;
}
.pic:hover .text {
opacity:0.6;
text-align:justify;
color:#000000;
font-size:36px;
font-weight:700;
font-family:"Times New Roman", Times, serif;
}
</style>
</head>
<body>
<div class="pic">
<div class="text">
本代码由捷西网络提供！<br><br>
需要更多访问捷西网络官网了解更多！
</div>
</div>
</body>
</html>

热心网友时间：2022-04-19 11:26

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>景安网络</title>
</head>

<body>
<a href="http://host.zzidc.com/"><img src="new_a_logo.gif" title="景安网络"></a>
</body>
</html>

可以使用title属性来显示图片的文字内容

热心网友时间：2022-04-19 13:34

用title
<img title="文字说明" src="图片路径">

不需要CSS本身的img标签就有title属性可以实现
如果有帮到你请采纳

热心网友时间：2022-04-19 15:59

当鼠标经过图片时，图片下边弹出一个半透明文字提示框样式demo www.100sucai.com/demos.php?id=1413207110追问嗯嗯就是你说的那个效果。怎么弄的。