鼠标滑过图片显示文字_div+css 鼠标移到图片上显示文字内容

❶ 怎么实现鼠标经过图片在图片上显示文字css

<html>
<head>
<style>
#container{position:relative;height:200px;width:300px;border:1px solid red;}
#inss{position:absolute;height:30px;width:300px;}
</style>

<script>
function xianshi(){document.getElementById("inss").style.display="block";}
function yincang(){document.getElementById("inss").style.display="none";}

</script>
<head>
<body>
div代码：
<div id="container" onmouseover="xianshi()" onmouseout="yincang()">
<div id="inss">遮罩层</div>
</div>
</body>
</html>

这个是我做的遮罩层的，和你的需求类似，可以稍作修改，实现你的效果，希望可以帮到你！

❷ 在PPT中，如何使鼠标移动到字或图片上，字或图片就出现

1、首先打开电脑点击PPT，在点击导入图片，给图片对象设置一个自定义动画。

❸ 如何做到在Dreamweaver 鼠标指向图像时显示文字

如果是放图片上，要显示文字信息，你在dreamweaver中选中图片，下面的属性面版中有一个“替换”，在里面输入你想要的文字就行了。
如果是文字，你选中文字，然后看源代码，在源代码的文字前面的<>标签中加上
title="说明文字"
就行了，如：
<...
title="说明文字写这儿">文字在这儿
..
其中的<...>和
..
是标签。

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

1.首先看看HTML、一个img图像控件和一个带掩码样式的div，其中包含文本。这是蒙版层。

❺ ppt制作当鼠标移过图片时出现相应文字。需要过程。谢谢

利用三张幻灯片，并给特定对象的添加动作设置（鼠标移过）进行一、二两张幻灯片之间的切换可以达到你所说的效果。
具体方法：
第一张幻灯片：输入文字，对文本框进行动作设置，设置为鼠标移过链接到下一张幻灯片；再选中文字，设置单击鼠标链接到第三张（或指定幻灯片）；
第二张幻灯片：同位置同设置的文字（与第一张完全一样，并选中文字，设置单击鼠标链接到第三张或指定幻灯片）；图片，不添加效果；利用多边形工具，围绕文本框四周画一空心多边形，呈回字状，文本框处镂空，设置自定义图片效果，填充色随便，透明度100%，边框线无（将此自定义多边形设置为全透明），给此自定义多边形添加动作设置，设置为鼠标移过链接到上一张幻灯片；
放映，是不是可以达到你所说的效果。此种做法的缺陷是只能对一个文本框设置此种效果，如果同一张幻灯片中有多个这种效果，只能用编辑的方式，当然会比较麻烦，因为要考虑不同的热区，设置不同的响应对象。

❻ 如何在图片上制作鼠标滑过显示文字的效果

<title>鼠标经过效果</title>
</head>

<body>
<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 1px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 55px; /*position where enlarged image should offset horizontally */

}

</style>
<a class="thumbnail" href=链接>文字在这呢 <span><img src="图片地址" alt="图片在这" width="110" border="0"></span></a>
</body>
</html>

这个是鼠标经过文字，出现图片，不过效果是一样的，只要你把图片和文字的位置交换一下就okl了

❼ html鼠标经过图片显示文字

给图片添加title
属性
<img
title="我是图片"/>

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

1、首先输入：

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8"/>

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

<style>

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

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

❾ 网页怎么做鼠标移到图片就显示文字

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移到图片上显示文字效果</title>
<style>
.bot .sendList {
margin-right:6px
}
.explore {
width:936px;
margin:20px auto 0;
overflow:hidden;
position:relative;
font-size:0px;
}
.explore li {
width:160px;
height:150px;
overflow:hidden;
display:inline-block;
position:relative;
}
.explore li {
*display:inline;
}
.explore li .wqPic {
width:160px;
height:150px;
overflow:hidden;
}
.explore .wqLink {
display:block;
width:160px;
height:150px;
color:#FFF;
text-align:center;
font-family:"微软雅黑"
}
.explore .wqItem .wqName {
position:absolute;
bottom:0;
left:0;
width:130px;
height:40px;
line-height:40px;
font-size:16px;
overflow:hidden;
padding:0 10px;
}
.explore .wqItem .bg {
background:#333;
opacity:0.8;
filter:alpha(opacity = 80);
position:absolute;
bottom:0;
left:0;
width:150px;
height:40px;
}
.explore .wqLink:hover {
cursor:pointer;
text-decoration:none;
}
.explore .wqLink:hover .wqItem .bg {
height:150px;
}
.explore .wqLink:hover .wqItem .wqName, .explore .detail {
visibility:hidden;
}
.explore .wqLink:hover .detail {
visibility:visible;
}
.explore .detail {
background:#000;
position:absolute;
top:128px;
left:0;
width:160px;
line-height:22px;
height:22px;
font-size:12px;
filter:alpha(opacity = 65);
}
.explore .detail .wqName {
font-size:16px;
padding:0 10px;
line-height:22px;
}
.explore .detail .info {
margin-top:10px;
}
</style>
</head>
<body>
<div id="topWrap">
<div class="wqSquare">
<div class="explore">
<ul>
<li> <a onmousedown="MI.Bos('wQBtnBigImgQun')" href="#" class="wqLink">
<div class="wqItem"> <img src="/img/2.jpg" class="wqPic" /> </div>
<div class="detail">
<div class="wqName">Boaer.com</div>
</div>
</a> </li>
</ul>
</div>
</div>
</div>
</body>
</html>

❿ html 鼠标停留在移动的图片上后怎么显示文字，求代码；

title是图片显示的标题，alt是替换文字，即当图片显示错误的时候，会显示alt里面的文字。鼠标放上去都会显示title和alt这两个属性里面的文字，但title优先级高于alt。

但是
<img
alt=鼠标停留显示的文字<br>鼠标停留显示的文字>
这样是不行的，你鼠标放上去是不会换行的，
你可以这样
<img
alt=鼠标停留显示的文字鼠标停留显示的文字>
这样就换行显示了

导航:首页 > 文字图片 > 鼠标滑过图片显示文字

鼠标滑过图片显示文字

与鼠标滑过图片显示文字相关的资料