I’m using WordPress for my website. What I’m trying to achieve is that if I hover on a specific post, it should show the title of that very post. But what it does right now, is that if I hover on one post, it displays the title of all the posts.
The code:
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<div>
<div class="post-header"><a href="<?php the_permalink() ?>">
<?php if ( p75HasThumbnail($post->ID) ) { ?>
<img src="<?php echo p75GetThumbnail($post->ID, 200, 108); ?>" alt="<?php the_title(); ?>" width="200" height="108" />
<?php } ?>
</a></div>
<div class="post-content" style="display:none;">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
</div>
<div class="post-footer">
<small>
In: <?php the_category(' | ') ?>
</small>
</div>
</div>
</div>
<!-- -->
<?php endwhile; ?>
<?php next_posts_link('<div class="post archiveTitle "><div>← Older</div></div>') ?>
<?php previous_posts_link('<div class="post archiveTitle "><div>Newer →</div></div>') ?>
<?php else : ?>
<div class="post">
<div>
<h1>Not Found</h1>
<p>Sorry, but you are looking for something that isn't here.</p>
</div>
</div>
<?php endif; ?>
JS:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('.post-header').hover(function(){
$('.post-content').show();
}, function(){
$('.post-content').hide();
});
});
</script>
I’m not sure, if it’s this, what you want to achieve:
Now only the post-content of the currently hovered post is shown.