《HTML》 要鏈接jquery.min.js文件

<!-- 一個大的div ul li 包含所有的圖片 撲克牌 -->
<h3>come on baby 猜牌遊戲！</h3>
<div class="music">
<audio src="music/doudizhu.mp3" controls="controls" autoplay="autopaly" loop="true">
<!-- loop="true" 一直循環 -->
<!-- autoplay 如果出現該屬性，則音頻在就緒後馬上播放。
controls 如果出現該屬性，則向用戶顯示控件，比如播放按鈕
loop 如果出現該屬性，則每當音頻結束時重新開始播放。 -->
</audio>
</div>

<div class="content">
<ul class="nice">
<li class="one">
<a class="name" href=""><img src="image/puke.jpg"></a>
<a class="five" href=""><img src="image/p_1.jpg"></a>
</li>
<li class="one">
<a class="name" href=""><img src="image/puke.jpg"></a>
<a class="five" href=""><img src="image/p_2.jpg"></a>
</li>
<li class="one">
<a class="name" href=""><img src="image/puke.jpg"></a>
<a class="five" href=""><img src="image/p_3.jpg"></a>
</li>
<li class="one">
<a class="name" href=""><img src="image/puke.jpg"></a>
<a class="five" href=""><img src="image/p_4.jpg"></a>
</li>
</ul>
</div>

《css》

* {
margin:0;
padding:0;
}
h3 {
text-align: center;
margin-top: 20px;
}
.music {
display: none /*隱藏音樂播放器*/
}
.content {
width:500px;
height: 200px;
margin:50px auto;
}
.content ul li {
list-style-type:none;
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(){ //獲得上面的case方法
$(".five").hide(); //讓撲克牌正面隱藏
$(".one").hover( //當鼠標懸停的時候
function(){
$(this).children(".name").hide(); //讓它下面的子元素反面隱藏
$(this).children(".five").show(); //然後讓它正面顯示
},function(){

$(this).children(".five").hide(); //同樣下面是反過來
$(this).children(".name").show();

}
);
}
})

猜撲克牌