11548 sujets

JavaScript, DOM et API Web HTML5

Apparaît - disparaît

Bonjour, je suis débutant en jquery, je réalise un theme wordpress et je reste bloqué à un endroit! ......... Smiley bawling
Je m'explique, le but de la page est d'afficher les réalisations, c'est un portfolio.
Toute les images (même taille) ce suive, comme dans une galerie (4 par ligne)et lorsque l'on passe sur une : elle float à gauche et sa description à droite en gros: | | | | | | | | et lorsque l'on passe sur une: | | --------
Je fait avec les moyens du bord ! Smiley langue dsl je n'ai pas de capture d'écran ni d'exemple en ligne....

Voilà le php: 

<div id="content">
	<div id="content-project">
  <?php wp_reset_postdata(); ?>
  <?php query_posts('posts_per_page=-1&post_type=projet'); ?>
  <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
		<div class="project">
			<div class="hide">
				<h3 class="project-name"><?php the_title(); ?></h3>
				<p class="project-description"><?php the_excerpt(); ?></p>
				<?php echo get_the_term_list( $post->ID, 'type', '<p>Type de projet : ', ', ', '</p>' ) ?>
			</div>
        <?php the_post_thumbnail('thumbnail');  ?>
		</div>
    <?php endwhile; ?>
	<div class="navigation">
        <?php posts_nav_link(' - ','next page','previous page'); ?>
    </div>
  <?php endif; ?>
  </div>
</div>


la tentative de jquery...:

$(".project").hover(function(){
		$(this).removeClass("hide").addClass("hover");
		},function () {
		$(this).removeClass("hover").addClass("hide");
		})

et un peut de css :

.project img{
	margin: 20px ;
	float: left;
	height: 150px;
	width: 150px;
	border: solid white 6px;
    box-shadow: 1px 1px 5px #555;
    -webkit-box-shadow: 1px 1px 5px #555;
}
.hover{
    position:absolute;
	display:block;
	margin:0;
	margin-bottom: 0px;
	left: auto;
	color:#fff;
	font-size:12px;
	font-family: Twen cen ten, Trebuchet Ms, Arial;
	padding-top: 5px;
	padding-bottom: 20px;
	width:inherit;
	text-align:left
}
#content-project{
	width: 800px;
}
.hide{
	position:absolute;
	left: -9999px;
}

Ahhh oui mon problème c'est que quand je passe sur une image, le texte apparaît mais sens décaler les images et tous le texte de toutes les images apparaît Smiley biggol


Merci de vos réponses!! Smiley langue
Ton texte positionné en absolu survolera nécessairement les autres éléments sans les décaler puisque ce mode de positionnement le rend indépendant de ses frères (il n'y a que son premier parent lui-même positionné qui l'influencera).

C'est donc à priori un problème de CSS
C'est bon, sa marche un peut mieux : le texte apparaît mais le gros problème qui vient de mon script jquery est que lorsque je passe sur une image il m'affiche tous les textes de toutes les images à la place d'un seul Smiley bawling
Tu n'aurais pas un exemple en ligne ? Ce serait plus simple de t'aider ainsi.

Mais regarde ce bout de code, tu ne cible pas les div.hide, mais les div.project. Tu devras sûrement faire quelque chose du genre : (mais ce sera probablement à adapter à tes cas plus précisément)


$(".project").hover(function(){

		$(this).child('div').removeClass("hide").addClass("hover");

},function () {

		$(this).child('div').removeClass("hover").addClass("hide");

})

Modifié par Vaxilart (08 Jan 2012 - 17:17)
Sujet clos
Aller à