Javascript 导致眨眼的过度使用

我使用onmouseover、z-index属性和一组CSS类来显示隐藏在图像后面的文本。然而，我的图像在悬停时会快速闪烁。有人能帮我吗？（这是wordpress的主题）

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

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

---

尝试使用CSS精灵，因为大多数情况下，悬停图像闪烁是由浏览器在被悬停调用时加载图像所花费的时间引起的。精灵将一次加载所有图像并消除闪烁。

---

尝试使用CSS精灵，因为大多数情况下，鼠标悬停图像闪烁是由鼠标悬停调用浏览器加载图像所花费的时间引起的。精灵将一次加载所有图像并消除闪烁。

---

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

---

更好的例子：当您通过鼠标悬停来隐藏image div时，是否有其他元素取代了它？您提到它后面隐藏的文本元素。尝试将“重新显示div”处理程序附加到文本div的onmouseout，同时将“隐藏div”处理程序保留在原来的位置（附加到图像div的onmouseover）。

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

---

更好的例子：当您通过鼠标悬停来隐藏image div时，是否有其他元素取代了它？您提到它后面隐藏的文本元素。尝试将“重新显示div”处理程序附加到文本div之外的onmouseout，同时将“隐藏div”处理程序保留在原来的位置（附加到图像div的onmouseover）。

是否对图像使用CSS精灵？不，提供的代码和CSS都是我正在使用的，但会导致闪烁。我知道这可以通过修改onmouseout来解决：。。。我只是不知道怎么做。你能添加一个链接到你的网站吗？你的图片使用CSS精灵吗？不，提供的代码和CSS都是我正在使用的，但它会导致闪烁。我知道这可以通过修改onmouseout来解决：。。。我只是不知道怎么做。你能给你的网站添加一个链接吗？那里只有一个图片，后面的文字只是文字。CSS精灵不适用。那里只有一个图像，后面的文字只是文本。CSS精灵不适用。在这种情况下，这真的没有帮助，因为我需要在上面执行此操作，而不是单击。确定，但这就是它闪烁的原因：）在这种情况下，这真的没有帮助，因为我需要在上面执行此操作，而不是单击。确定，但这就是它闪烁的原因：）

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

#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 }