Comment puis-je exclure un effet de survol avec CSS

J'ai écrit du code pour qu'une boîte de descente apparaisse lorsque vous faites défiler une image, mais la façon dont elle est CSS est mis en place Je dois inclure la boîte popup dans le vol stationnaire classe, ce qui signifie que lorsque vous quittez l'image de base sur la boîte, il reste, comment puis-je changer cela afin que la boîte disparaisse après avoir déplacé le curseur de l'image de l'icône.Comment puis-je exclure un effet de survol avec 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>

Source

2013-10-12 Wesxdz

qui signifie que lorsque vous vous déplacez hors de l'image de base sur la boîte, il reste, comment puis-je changer cela si la boîte disparaît après avoir déplacé le curseur de l'image d'icône.

En simple, disant de disparaître à nouveau quand il se se planait:

.icon .desc:hover { display:none; }

Mais il faut savoir que cela pourrait conduire à un « effet de scintillement » si elle disparaît laisse le curseur sur l'image à nouveau, parce que cela va déclencher la boîte à redevenir visible ... donc cela ne fonctionne que si la boîte ne chevauche pas l'image.

http://jsfiddle.net/XVgcT/

Source

2013-10-12 00:48:06 CBroe

Comment puis-je exclure un effet de survol avec CSS

Répondre

Questions connexes