javascript - onmouseover 导致闪烁

Question

我正在使用 onmouseover、z-index 属性和一组 CSS 类来显示隐藏在图像后面的文本。但是，将鼠标悬停在上方时，我的图像会快速闪烁。有人可以帮帮我吗？ (这是在 wordpress 主题中)

问题出在这一行，在onmouseout...我只是不知道如何修改它来解决问题:

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

我的标记:

    <?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(); ?>

我的 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 }

Answer 1

隐藏鼠标指针位于其上的元素会导致 onmouseout 触发，再次显示该元素，从而隐藏该元素，等等。您可能应该将“重新显示 div”事件附加到其他事件，例如点击例如。

更好的例子:当你的图像 div 被鼠标悬停隐藏时，另一个元素会取代它吗？你提到它背后隐藏的文本元素。尝试将“重新显示 div”处理程序附加到文本 div 的 onmouseout，同时将“隐藏 div”处理程序留在原处(附加到图像 div 的 onmouseover)。