猜扑克牌

最新推荐文章于 2020-12-30 11:32:54 发布

梦如芙蓉浦

最新推荐文章于 2020-12-30 11:32:54 发布

阅读量336

点赞数

本文链接：https://blog.csdn.net/qq_39074912/article/details/77463555

版权

<html>

<h3>小哥哥快来玩啊，这游戏老好玩了~</h3>
<audio src="music/doudizhu.mp3" loop="true" autoplay="autoplay"></audio>
<div class="content">
<ul class="nice">
<li class="one">
<a href="#" class="name"><img src="image/1.jpg" alt="" /></a>
<a href="#" class="five"><img src="image/puke.jpg" alt="" /></a>
</li>
<li class="one">
<a href="#" class="name"><img src="image/2.jpg" alt="" /></a>
<a href="#" class="five"><img src="image/puke.jpg" alt="" /></a>
</li>
<li class="one">
<a href="#" class="name"><img src="image/3.jpg" alt="" /></a>
<a href="#" class="five"><img src="image/puke.jpg" alt="" /></a>
</li>
<li class="one">
<a href="#" class="name"><img src="image/4.jpg" alt="" /></a>
<a href="#" class="five"><img src="image/puke.jpg" alt="" /></a>
</li>
<li class="one">
<a href="#" class="name"><img src="image/5.jpg" alt="" /></a>
<a href="#" class="five"><img src="image/puke.jpg" alt="" /></a>
</li>
<li class="one">
<a href="#" class="name"><img src="image/6.jpg" alt="" /></a>
<a href="#" class="five"><img src="image/puke.jpg" alt="" /></a>
</li>
<li class="one">
<a href="#" class="name"><img src="image/7.jpg" alt="" /></a>
<a href="#" class="five"><img src="image/puke.jpg" alt="" /></a>
</li>
</ul>

<ul class="nice">
<li class="one">
<a href="#" class="name"><img src="image/8.jpg" alt="" /></a>
<a href="#" class="five"><img src="image/puke.jpg" alt="" /></a>
</li>
<li class="one">
<a href="#" class="name"><img src="image/9.jpg" alt="" /></a>
<a href="#" class="five"><img src="image/puke.jpg" alt="" /></a>
</li>
<li class="one">
<a href="#" class="name"><img src="image/10.jpg" alt="" /></a>
<a href="#" class="five"><img src="image/puke.jpg" alt="" /></a>
</li>
<li class="one">
<a href="#" class="name"><img src="image/j.jpg" alt="" /></a>
<a href="#" class="five"><img src="image/puke.jpg" alt="" /></a>
</li>
<li class="one">
<a href="#" class="name"><img src="image/q.jpg" alt="" /></a>
<a href="#" class="five"><img src="image/puke.jpg" alt="" /></a>
</li>
<li class="one">
<a href="#" class="name"><img src="image/k.jpg" alt="" /></a>
<a href="#" class="five"><img src="image/puke.jpg" alt="" /></a>
</li>
<li class="one">
<a href="#" class="name"><img src="image/king.jpg" alt="" /></a>
<a href="#" class="five"><img src="image/puke.jpg" alt="" /></a>
</li>
</ul>
</div>

<css>

* {
margin: 0;
padding: 0;
list-style: none;
}
h3 {
text-align: center;
margin: 20px;
}
.content {
width: 795px;
/*height: 310px;*/
margin: 0 auto;
}
/*.content ul {
padding-top: 10px;
}*/
.content ul li {
float: left;
}
.content ul li.one {
width: 105px;
height: 150px;
}
.one a {
display: block;
width: 105px;
height: 150px;
}
.one a.name {
border: 1px solid #b69d6b;
}

<js>

$(function(){
cases();
function cases(){
$(".name").hide();
$(".one").hover(
function(){
$(this).children(".five").hide();
$(this).children(".name").show();
},function(){
$(this).children(".name").hide();
$(this).children(".five").show();
});
}
})