站長之家-站標logo圖片
歡迎你來到站長之家!
攜手合作圖片
banner圖片
當前位置:網站首頁 >> 網站技術 >>



站長之家推出“鼠標懸停圖片顯示文字”效果的實現


【發布人:站長之家    發布日期:2015-04-07】

本文介紹一下“鼠標懸停圖片顯示文字”效果的實現,很多網站對于圖片都使用了特殊效果,本文介紹一下利用DIV+CSS技術在鼠標懸停到圖片上圖片下方顯示鏈接文字的效果,并給出實際測試過的實例來加以說明。各位站長們可以通過DIV+CSS技術來實現,實現的效果如下圖所示。下圖中的圖一為網站上的圖片,圖二為當鼠標懸停在圖片上時,圖片下方顯示出“歡迎您訪問站長之家網站(www.hdfwko.tw)”的文字,文字加有超級鏈接,點擊鏈接可以轉向鏈接的網站地址。

鼠標懸停圖片顯示文字效果實例圖片一

下面利用DIV+CSS技術制作和測試了這種“鼠標懸停圖片顯示文字”的代碼,各位站長們也可以在自己的網站上實現這種效果。下面是實例代碼在下面列出來,可供各位站長們參考。各位站長們也可以根據代碼進行修改,從而在您的網站上實現更佳的效果出來。該代碼在多個瀏覽器如IE、Chrome、360瀏覽器上都能正常測試通過,各位站長們可以直接參考使用,甚至將代碼直接運用到自己的網站上:

<!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=gb2312">
<title>推出“鼠標懸停圖片顯示文字”效果的實現</title>

<style type="text/css">
.zzdjcss{ position:relative;width:429px; height:300px; margin:0 auto; background:url(exam.jpg) no-repeat;}
.zzdjcss span{display:none;}
.zzdjcss:hover span{ display:block; position:absolute; bottom:0; left:0; width:429px; z-index:10; height:50px; line-height:50px; background:#000; filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;}
.zzdjcss:hover span a{cursor:pointer; color:#FFF; display:block; text-decoration:none; text-align:center;}
</style>

</head>
<body>

<div class="zzdjcss">
<span><a href="http://www.hdfwko.tw/" target="_blank">歡迎您訪問站長之家網站(www.hdfwko.tw)</a></span>
</div>

</body>
</html>

本實例代碼顯示的結果如上面圖中圖二所示。


(本頁地址為:http://www.hdfwko.tw/tech/tech-14.html,請尊重別人的勞動,不要復制和采集。轉載請注明本文出處)

信息顯示圖片
頁腳blank圖片

版權所有:站長之家【www.hdfwko.tw】

四川快乐12开奖号