onmouseover原因を点滅させる

Question

私はonmouseover、z-indexプロパティ、および一連のCSSクラスを使用してイメージの背後に隠れたテキストを表示しています。しかし、私のイメージは、上に乗ったときにすばやく点滅します。誰か助けてくれますか？

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

私のマークアップ：

問題がれるonmouseoutで、このラインである...私は問題を解決するためにそれを修正する方法がわからない（これは、ワードプレスのテーマです）：

<?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

あなたはおそらく何か他のものにあなたの「再表示のdiv」イベントを添付しなければならない要素、などなどを隠し、それが再び要素を表示し、発射するれるonmouseout原因となる上にマウスポインタを持っている要素を、非表示例えば、クリックのように。

もっと良い例：画像divがマウスオーバーで隠されている場合、別の要素が代わりに使用されますか？その背後に隠されたテキスト要素があります。 "div div"ハンドラをどこに置いても（画像divのonmouseoverに）、 "re-show div"ハンドラをテキストdivのonmouseoutに接続してみてください。

Answer 2

時間のほとんどは、ホバー画像のちらつきが時間によって引き起こされるとCSSスプライトを使用してみてくださいホバーによって呼び出されたときにブラウザーがイメージをロードするのに要します。スプライトはすべての画像を一度に読み込んでちらつきをなくします。 Css sprites