1

同様のトピックに関するスタックのすべての投稿を読みましたが、問題を解決しているようには見えません。

基本的に、単一の画像を含む ul の div があります。ホバーすると、50% の不透明度にフェードします。問題なく動作します。今、divの1つに対して、divの中心に絶対に配置された2番目の画像があります。divをホバーするとマウスオーバーがトリガーされますが、ポインターが2番目の画像の上を通過すると、イベントが再トリガーされます。

以下のコードを見つけてください

JQuery

jQuery('.lighter').mouseover(function() {
    jQuery(this).fadeTo(200, 0.5);
});
jQuery('.lighter').mouseout(function() {
    jQuery(this).fadeTo(200, 1);
});

html

<ul class="home-three-columns">
    <li>
        <a href="#">
            <div class="lighter">
                <img class="first" src="<?php echo $this->getSkinUrl('images/gift-finder.jpg') ?>" alt="" />
            </div>
        </a> 
    </li>
    <li style="position:relative;">
        <a href="#">
            <div class="lighter">
                <img class="mid" src="<?php echo $this->getSkinUrl('images/product-of-the-month.jpg') ?>" alt="" />
                <img class="prod-week" src="<?php echo (string)Mage::helper('catalog/image')->init($product, 'image')->resize(68, 86);?>" style="position:absolute; top:99px; left:89px;" />
            </div>
        </a>
    </li>
    <li>
        <a href="#">
            <div class="lighter">
                <img class="last" src="<?php echo $this->getSkinUrl('images/in-the-press.jpg') ?>" alt="" />
            </div>
        </a>
    </li>
</ul>

ご覧のとおり、ポインターが.prod-weekを超えると、問題を引き起こしている2番目のliです。これまでに行った検索に基づいて、

jQuery('.lighter').not('.prod-week').mouseover(function() {
        jQuery(this).fadeTo(200, 0.5);
    });

など、効果なし。

誰かが洞察を与えたり、私が見逃している明らかな間違いを指摘したりできれば、それは大歓迎です。

4

2 に答える 2

3

と を使用する必要があり.mouseenter()ます.mouseleave()。

$('.lighter').mouseenter(function() {
  $(this).fadeTo(200, 0.5);
});
$('.lighter').mouseleave(function() {
  $(this).fadeTo(200, 1);
});​

または、.hover()略して。

$('.lighter').hover(function(){
  $(this).fadeTo(200, 0.5);
}, function(){
  $(this).fadeTo(200, 1);
});​

あなたの実際の解決策.stop()は目に見えないようにするだけですが、関数のトリガーをログに記録すると、それが同じままであることがわかります。

一例。

于 2012-07-07T22:06:18.930 に答える
0

どうにかアニメーションにストップを追加することで問題が解決したようです。

jQuery('.lighter').mouseover(function() {
    jQuery(this).stop().fadeTo(200, 0.5);
});
jQuery('.lighter').mouseout(function() {
    jQuery(this).stop().fadeTo(200, 1);
});

誰かがコメントしたい場合は、それがどのように修正されるかよくわかりません!

于 2012-07-07T21:50:34.523 に答える