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，同时将“hide div”处理程序保留在其中（附加到图像div的onmouseover）。

Answer 2

尝试使用CSS sprites，因为大多数情况下悬停图像闪烁是由浏览器在悬停调用时加载图像所花费的时间造成的。精灵将立即加载所有图像并消除闪烁。 Css sprites

onmouseover导致闪烁

2 个答案: