0

私はこのように非常に単純な onmouseover fadeTo を実行しています:

$(document).ready(function() {    
$('img#logo-link, a.advert').hover(function() {    $(this).fadeTo('fast',0.75)    } , function(){    $(this).fadeTo('fast',1)    });
});

...FF7/8 では正常に動作しますが、要素 a.advert を Chrome でフェードさせることができません (他のフェードは正常に動作します)。HTML は次のとおりです。

<a class="advert lime" href="/my-url">
    <div class="wrapper">
        <img src="file.jpg" width="225" height="280" alt="Alt text" />
        <div class="description">
            <div class="description_content">
                <h3>Advert title</h3>
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</a>

Chrome のインスペクターで不透明度が変化しているのがわかりますが、ドキュメント内では何も変わらないように見えます。他のそのようなフェードは正常に機能します (画像のあるものを含む)。

jQuery 1.6.2 を使用しています。

何かご意見は？

4

1 に答える 1

0

私が最初に考えたのは、これはインライン要素 (a) 内にブロックレベルの要素 (div、画像など) があることが原因であるということです。追加してみてください：

a.advert {
  display: block;
}

ただし、これを達成するためのより良い方法は、タグを取り除き、ajQuery と CSS でその動作を模倣することです。

.wrapper:hover {
  cursor: pointer;
}

$(".wrapper").click(function() {
  window.location = '/my-url';
};

そして、ホバー効果は、同じコードを使用して、$(".wrapper")代わりに実行すると、最も確実に機能し$("a.advert")ます。

于 2011-10-10T12:28:49.893 に答える