CSS on hover Afficher le contenu

Je me tape ici comme je l'ai fait beaucoup de fois auparavant, mais pour une raison quelconque, mon code ne fonctionne pas et je ne peux pas vous expliquer pourquoi. Je l'ai regardé pendant un moment maintenant, ce qui ne m'aide probablement pas. De toute façon j'essaye de faire un CSS en vol stationnaire. Donc, lorsque vous passez la souris sur un div avec un autre div.CSS on hover Afficher le contenu

HTML

<div class="pressListItem"> 
    <img src="" width="" height=""> 
    <h3>July 2013</h3> 
</div> 
<div class="pressItemHover"> 
    <p>This is come more content, lalala here is a little snippet</p> 
    <span></span> 
    <span>Read more</span> 
</div>

CSS

J'utilise la transition d'opacité que je veux fondu.

.pressItemHover{ 
    opacity: 0; 
    transition: opacity 0.5s linear 0s; 
    visibility: hidden; 
} 

.pressListItem:hover .pressItemHover{ 
    opacity: 1; 
    visibility: visible; 
} 

.pressListItem{ 
    width: 200px; 
    float: left; 
    height: 200px; 
    margin-right:12px; 
    text-align: center; 
    border: solid 1px #e4e4e4;  
}

Si quelqu'un pouvait indiquer ce que je Je fais mal ce serait très apprécié!

Source

2013-10-04 JDavies

Modifier le sélecteur sur:

.pressListItem:hover + .pressItemHover { 
    opacity: 1; 
    visibility: visible; 
}

jsFiddle example

.pressListItem:hover .pressItemHover semble un élément avec la classe pressItemHover qui est un descendant de pressListItem alors qu'en réalité il est un frère, auquel cas vous voulez pour utiliser le sélecteur de frère adjacent +.

Source

2013-10-04 18:28:17 j08691

1+ Il fonctionne, mais il est vraiment glitch .. Il scintille - dans Chrome de toute façon –

Parfait merci! J'ai même essayé d'utiliser le> mais le + semble avoir fait l'affaire! Je vous remercie!! – JDavies

@JoshC ok merci, je vais faire quelques tests, probablement besoin de jouer avec le CSS – JDavies

Dans votre code HTML .pressListItem et .pressItemHover sont frères et soeurs. Dans votre CSS, vous définissez des styles à div qui est un enfant de .pressListItem. Vous devez changer HTML pour ce

<div class="pressListItem"> 
    <img src="" width="" height=""> 
    <h3>July 2013</h3> 

    <div class="pressItemHover"> 
     <p>This is come more content, lalala here is a little snippet</p> 
     <span></span> 
     <span>Read more</span> 
    </div> 
</div>

ou si vous ne wan't pas restructurer votre DOM, vous pouvez simplement changer cette partie de CSS

.pressListItem:hover + .pressItemHover {

Source

2013-10-04 18:29:05 matewka

CSS on hover Afficher le contenu

Répondre

Questions connexes