我怎樣才能排除懸停效果與CSS

我已經寫了一些代碼，所以當你滾動圖像時會彈出一個desc框，但是它的CSS設置方式我必須在彈出框中包含懸停類，這意味着當您將基礎圖像移動到它保留的盒子上時，如何更改它以便在從圖標圖像移動光標後盒子消失。我怎樣才能排除懸停效果與CSS

<!DOCTYPE html> 
<html> 
<head> 
<style> 

p { margin-top: -6px; } 

h1.d1 { 
    color: #0195d3; 
    font-size: 18px; 
    font-weight:bold; 
    font-family:"Veranda",Arial; 
    letter-spacing:.8px; 
    text-align:left; 
    } 

p.d2 { 
    color:#c8c8c8; 
    font-size: 12px; 
    font-family:"Veranda",Arial; 
    letter-spacing:.05px; 
    line-height:100%; 
    text-align:left; 
    } 

.desc{ 
    background: black; 
    opacity: .85; 
    height: 140px; 
    width: 180px; 
    margin: 0 auto; 
    position: absolute; 
    text-align: center; 
    top: -100px; 
    left:-20px; 
    display:none; 
    padding:1px 20px; 

} 
.desc:after{ 
    content:''; 
    position:absolute; 
    bottom:-5px; 
    width:20px; 
    height:20px; 
    background:black; 
    left:20%; 
    margin-left:-10px; 
    -moz-transform:rotate(45deg); 
    -webkit-transform:rotate(45deg); 
    transform:rotate(45deg); 
} 
.icon { 
    margin:200px; 
    float:left; 
    position:relative; 
    cursor:pointer; 
} 

.icon:hover .desc{ 
    display:block; 
} 
</style> 
</head> 
<body> 

<div class="icon"> 
<img src="Images/Icon/Vault.png"> 
<div class="desc"> 
<h1 class="d1">Vault</h1> 
<p class="d2">9/24/13</p> 
<p class="d2">Who knew a 2D platformer could also be an epic RPG quest? 
Vault is about exploration and...</p> 
</div> 
</div> 

</body> 
</html>

來源

2013-10-12 Wesxdz