滑鼠滑過圖片顯示文字_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=滑鼠停留顯示的文字滑鼠停留顯示的文字>
這樣就換行顯示了

導航:首頁 > 文字圖片 > 滑鼠滑過圖片顯示文字

滑鼠滑過圖片顯示文字

與滑鼠滑過圖片顯示文字相關的資料