javascript實(shí)現(xiàn)鼠標(biāo)移到Image上方時(shí)顯示文字效果的方法
更新時(shí)間：2015年08月07日 14:55:04 作者：皮蛋
這篇文章主要介紹了javascript實(shí)現(xiàn)鼠標(biāo)移到Image上方時(shí)顯示文字效果的方法,涉及javascript鼠標(biāo)事件及圖文屬性動(dòng)態(tài)設(shè)置的相關(guān)技巧,可用于為圖片增加文字提示效果,需要的朋友可以參考下
本文實(shí)例講述了javascript實(shí)現(xiàn)鼠標(biāo)移到Image上方時(shí)顯示文字效果的方法。分享給大家供大家參考。具體如下：
先看一下運(yùn)行效果截圖：
具體代碼如下：
<!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>jquery鼠標(biāo)移到Image上方時(shí)顯示文字效果</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="http://img.jbzj.com/file_images/article/201508/201587150400220.jpg" class="wqPic" /> </div>
<div class="detail">
<div class="wqName">天天好心情</div>
</div>
</a> </li>
<li> <a onmousedown="MI.Bos('wQBtnBigImgQun')" href="#" class="wqLink">
<div class="wqItem"> <img src="http://img.jbzj.com/file_images/article/201508/201587150400220.jpg" class="wqPic" /> </div>
<div class="detail">
<div class="wqName">天天好心情</div>
</div>
</a> </li>
</ul>
</div>
</div>
</div>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- nodejs處理圖片的中間件node-images詳解
- js關(guān)于getImageData跨域問題的解決方法
- jQuery插件ImageDrawer.js實(shí)現(xiàn)動(dòng)態(tài)繪制圖片動(dòng)畫（附源碼下載）
- javascript從image轉(zhuǎn)換為base64位編碼的String
- js的image onload事件使用遇到的問題
- js中Image對(duì)象以及對(duì)其預(yù)加載處理示例
- 通過js獲取div的background-image屬性
- JavaScript Image對(duì)象實(shí)現(xiàn)原理實(shí)例解析
相關(guān)文章
微信小程序?qū)崿F(xiàn)電影App導(dǎo)航和輪播
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)電影App導(dǎo)航和輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
typescript環(huán)境安裝并開啟VSCode自動(dòng)監(jiān)視編譯ts文件為js文件
這篇文章主要介紹了安裝typescript環(huán)境并開啟VSCode自動(dòng)監(jiān)視編譯ts文件為js文件,本文教大家最基礎(chǔ)的安裝和配置自動(dòng)監(jiān)視ts文件編譯成js文件，需要的朋友可以參考下
2022-06-06 
如何在JavaScript中實(shí)現(xiàn)私有屬性的寫類方式(二)
這篇文章主要介紹了如何在JavaScript中實(shí)現(xiàn)私有屬性的寫類方式。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12 
基于HTML+JavaScript實(shí)現(xiàn)中國(guó)象棋
這篇文章主要為大家詳細(xì)介紹了如何利用HTML+CSS+JS實(shí)現(xiàn)中國(guó)象棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08 
有時(shí)候我們需要數(shù)組元素的值，那么就可以參考下面的方法，文中提到了不少這方面的資料，數(shù)組去重功能等
2013-03-03 
uniapp如何手動(dòng)實(shí)現(xiàn)讓input文本框聚焦效果
最近使用uniapp做一個(gè)評(píng)論的功能,遇到一個(gè)需求就是點(diǎn)擊上面的評(píng)論圖標(biāo),讓定位在底部的input框聚焦,下面這篇文章主要給大家介紹了關(guān)于uniapp如何手動(dòng)實(shí)現(xiàn)讓input文本框聚焦效果的相關(guān)資料,需要的朋友可以參考下
2023-12-12 
js實(shí)現(xiàn)手機(jī)web圖片左右滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)手機(jī)web圖片左右滑動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-12-12 
使用javascript過濾html的字符串(注釋標(biāo)記法)
本篇文章是對(duì)使用javascript過濾html的字符串進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
2013-07-07 
這篇文章主要介紹了JS的async/await怎么使用,簡(jiǎn)單來說，async/await是基于promises的語法糖，使異步代碼更易于編寫和閱讀,下面來看詳細(xì)的介紹內(nèi)容吧。需要的小伙伴也可以參考一下
2021-12-12