鼠标经过展开图片

来源：互联网发布：手机淘宝怎么做编辑：程序博客网时间：2024/06/02 23:46

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标经过展开-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
ol,li {
list-style:none;
}
body {
background:#f3f3f3;
font-family:"宋体,微软雅黑";
}
img {
border:none;
}
.list_box {
color:#333;
background:#fff;
width:235px;
margin:20px auto;
border:1px solid #e0e0e0;
}
.list_box p a {
color:#333;
text-decoration:none;
line-height:28px;
display:inline-block;
*display:inline;
*zoom:1;
width:130px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
vertical-align:middle;
}
.list_box a:hover {
text-decoration:underline;
color:#f60;
}
.list_title {
font-size:16px;
font-weight:bold;
line-height:34px;
border-bottom:1px solid #e0e0e0;
background:#f9f9f9;
padding-left:12px;
width:223px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
vertical-align:middle;
}
.list {
font-size:14px;
line-height:28px;
padding:6px 12px 6px 35px;
}
.list li {
*zoom:1;
position:relative;
}
.item_num {
position:absolute;
display:inline-block;
*display:inline;
*zoom:1;
width:16px;
height:16px;
line-height:16px;
text-align:center;
font-size:10px;
background:#ccc;
color:#fff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin-right:7px;
vertical-align:middle;
top:6px;
left:-26px;
}
.item_num_top .item_num {
background-color:#f60;
}
.download_num {
float:right;
color:#999;
font-size:12px;
display:inline-block;
*display:inline;
*zoom:1;
width:48px;
white-space:nowrap;
overflow:hidden;
text-align:right;
}
.active .item_img {
display:block;
}
.item_img {
display:none;
margin:3px 0 4px 0;
}
.item_img img {
width:120px;
height:90px;
padding:2px;
border:1px solid #ccc;
}
.item_img img:hover {
border-color:#f60;
}
</style>
</head>
<body>
<div class="list_box">
<h4 class="list_title">电脑壁纸下载排行</h4>
<ol class="list">
<li class="active item_num_top">
<span class="item_num ">1</span>
<div class="item_detail">
<p><span class="download_num">10005500</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-1.png"></a>
</div>
</li>
<li class="item_num_top">
<span class="item_num">2</span>
<div class="item_detail">
<p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-2.png"></a>
</div>
</li>
<li class="item_num_top">
<span class="item_num">3</span>
<div class="item_detail">
<p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-3.png"></a>
</div>
</li>
<li>
<span class="item_num">4</span>
<div class="item_detail">
<p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-4.png"></a>
</div>
</li>
<li>
<span class="item_num">5</span>
<div class="item_detail">
<p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-5.png"></a>
</div>
</li>
<li>
<span class="item_num">6</span>
<div class="item_detail">
<p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-6.png"></a>
</div>
</li>
<li>
<span class="item_num">7</span>
<div class="item_detail">
<p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-7.png"></a>
</div>
</li>
<li>
<span class="item_num">8</span>
<div class="item_detail">
<p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-8.png"></a>
</div>
</li>
<li>
<span class="item_num">9</span>
<div class="item_detail">
<p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-1.png"></a>
</div>
</li>
<li>
<span class="item_num">10</span>
<div class="item_detail">
<p><span class="download_num">100000</span><a href="#">全球最美五百人</a></p>
<a class="item_img"><img src="http://www.jq22.com/img/cs/500x300-2.png"></a>
</div>
</li>
</ol>
</div><script>
$(document).ready(function() {
$list_li = $(".list li");
$list_li.eq(0).addClass("active");
$list_li.mouseover(function() {
$(this).addClass("active").siblings().removeClass("active");
});
});</script>
</body>
</html>

阅读全文

0 0