28172 sujets

CSS et mise en forme, CSS3

Affichage div au survol d'une autre

Bonjour à tous,

Ca fait longtemps que je lis les articles et le forum sur alsa, mais c'est mon premier post sur le forum, donc merci d'être indulgent...

J'aimerais afficher une div au survol d'une autre. Pour cela voici mon code :

<div class="blur pic" id="image";" > 
		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
</div>
<div id="titre">
		<a href="<?php the_permalink(); ?>"><span><?php the_title(); ?></span></a>
</div>


Et le CSS 

div#image
{
    position: absolute;
    cursor: default;
    /* Ombre portée vignettes */
    box-shadow:2px 2px 10px gray; 
    -moz-box-shadow:2px 2px 10px gray;
    -webkit-box-shadow:2px 2px 10px gray;
}

div#titre
{
	position: absolute;
    margin-left: 0 auto;
    margin-right: 0 auto;
    width: 200px;
    height: 200px;
    font-size: 20px;
    text-align: center;
}

a span 
{
    padding-top: 80px;
display: block;
}

#titre
{
	display: none;
}

#image:hover + #titre
{
	display: block;
}


Jusque là tout va bien, sauf que... j'ai un effet de clignotement au déplacement de la souris, sur Safari, sur Chrome, ça clignote et le lien du titre ne fonctionne pas et sur Firefox ça fonctionne aléatoirement il faut parfois repasser plusieurs fois sur la div principale pour que la seconde apparaisse...
vous pouvez vous le résultat ici

Est-ce que quelqu'un peut m'aider?

D'avance merci!
Salut,
je ne pense pas que le problème vienne de la, mais tu utilises des "id" au lieu d'utiliser des "class"
Un id ce doit d’être unique alors qu'une class peut être utilisé a plusieurs reprises.
Du coup au lieu d'avoir des id="image" et des id="titre" tu dois mettre des class="image" et class="titre" dans le code html.
Du coup dans le css cela sera des ".image" et ".titre" au lieu de "#image" et "#titre".
Ensuite je ne saisi pas trop pourquoi tu précises "div#image" dans le css, juste "#image" suffirait normalement ( et du coup avec la modification précédente juste ".image")

Bon par contre ça ne résout pas ton problème ..
J'ai essayé avec visibility:hidden et visibility:visible, mais ça ne marche pas mieux
Merci pour ta réponse, j'ai modifié mes id en class et en effet ça ne résout pas mon problème Smiley bawling

Si quelqu'un d'autre à une idée, je suis preneur Smiley biggrin
Hello,

J'aurais tendance à remplacer :
div#image:hover + div#titre {
    display: block;
}

.blur img:hover {
    -webkit-filter: blur(7px);
}

par :
.post-preview:hover #titre { display: block; }
.post-preview:hover img { -webkit-filter: blur(7px); }

De cette manière, les animations sont gérées au survol du bloc conteneur et non au survol des éléments concernés...
Oh Merci!

Ca fonctionne parfaitement!

Merci beaucoup! Je vais sûrement ériger une statue à ta gloire Smiley biggol
Modifié par skuun (14 Jan 2014 - 15:47)
Sujet clos
Aller à