Home/ Questions/Q 6564997
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T14:02:17+00:00

I’m using onmouseover, the z-index property, and a set of CSS classes to display

  • 0

I’m using onmouseover, the z-index property, and a set of CSS classes to display text hidden behind an image. However, my images blink rapidly when hovered over. Can anybody help me out? (This is in a wordpress theme)

The problem is in this line, in the onmouseout… I just don’t know how to modify it to fix the problem:

<span class="displayer" onmouseover="this.className='hidden'" onmouseout="this.className='displayer'">

My markup:

    <?php get_header(); ?>

<div id="container">
<div id="portfolio_content">

<!-- Grab posts -->
<div id="portfolio_wrap">
<?php while (have_posts()) : the_post(); ?>  

<!-- Get the image -->
<a href="<?php the_permalink() ?>">


<span class="img">

<span class="displayer" onmouseover="this.className='hidden'" onmouseout="this.className='displayer'">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'thmb-portfolio' ); } ?>
</span>


<!-- Excerpt title -->
<span class="title"><?php the_title(); ?></span>

<!-- Excerpt description -->
<span class="desc">
    <?php my_excerpt('short'); ?>
</span>
</span>
</a>


<?php endwhile; ?>

<!-- Next/Previous Posts -->
<?php if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
} ?>

</div>
</div>
</div>
</div>

<?php get_footer(); ?>

My CSS

#portfolio_content ul {
    list-style:none
}
#portfolio_content .img a {
    color:#444;
    z-index:110!important
}
#portfolio_content .img a:hover { }
#portfolio_content .img {
    display:block;
    float:left;
    height:250px;
    margin:0 35px 35px 0!important;
    overflow:hidden;
    padding:0;
    width:352px
}
#portfolio_content .img img {
    display:block;
    position:absolute!important;
    z-index:100!important
}
#portfolio_content .img img:hover {
    z-index:0!important
}
#portfolio_content .img .title, #portfolio_content .img .title a {
    font-size:22px;
    width:352px!important;
    height:250px!impotant;
    float:left!important;
    text-align:center;
    margin:100px 0 10px 0;
    position:relative!important;
    color:#444
}
.desc {
    font-size:13px;
    display:block;
    text-align:center!important;
    margin:0 auto!important;
    width:352px;
    color:#444
}
.displayer {
    display:block;
    background:#1a1a1a;
    overflow:hidden;
    width:352px;
    height:250px;
    z-index:900!important
}
.hidden { display:none }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Hiding an element that has the mouse pointer over it causes onmouseout to fire, displaying the element again, which hides the element, etc etc. You should probably attach your “re-show the div” event to something else, like a click for example.

    Better example: When you image div is hidden by mousing over, does another element take its place? You mention a hidden text element behind it. Try attaching the “Re-show div” handler to the onmouseout of the text div, while leaving the “hide div” handler where it is (attached to the onmouseover of the image div).

    • 0