javascript實作滑鼠移到Image上方時顯示文字效果的方法_javascript技巧
- WBOY原創
- 2016-05-16 15:46:201975瀏覽
本文實例講述了javascript實現滑鼠移到Image上方時顯示文字效果的方法。分享給大家供大家參考。具體如下：
先看一下運行效果截圖：
具體程式碼如下：
<!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鼠标移到Image上方时显示文字效果</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://files.jb51.net/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://files.jb51.net/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>
希望本文所述對大家的javascript程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn