0

私はcss（そして明らかに私）が管理できるよりも少し複雑な効果を作成しようとしています。

ページの読み込み時に5つのDIVの1つをアクティブにしてから、別のDIVにカーソルを合わせるまで、前のDIVをアクティブのままにするという考え方です。基本的に、アクティブな要素は常に存在します。

実行する必要があるのは、.promoExpandを非表示にしてホバーに表示することだけです。

これが私がこれまでに持っているものです：

$(document).ready(function(){
    $('.promo').mouseenter(function () {
        $(this).find('.item').addClass('promoExpand').siblings().removeClass('promoExpand');
    });
});

そしてHTMLのチャンク。

 <div class="promo">
    <img src="img/thumb/gratings.jpg">
    <h3>Fibreglass</h3>
    <div class="item">
      <p>These products are for the home. We specialise all of our decking for use by you.</p>
    </div>
  </div>

助けてくれてありがとう、

トム

4

4 に答える 4

2

兄弟は同じ親を持つ要素を探し、あなたの.promoExpand要素は異なる領域にあるように見えます。代わりにこれを使用してください：

$(document).ready(function(){
    $('.promo').mouseenter(function () {
        $(".promoExpand").removeClass('promoExpand'); //Remove all promoExpand classes here
        $(this).find('.item').addClass('promoExpand'); //Add the new one here.
    });
});
于 2011-09-20T14:40:35.110 に答える
0

これを見てみてください：

javascript :(最初にすべてのpromoexpandクラスを削除してから、ホバーされているクラスに追加します）

$(document).ready(function(){

$('.promo').mouseenter(function () {
    $('.promoExpand').removeClass('promoExpand');
  $(this).find('.item').addClass('promoExpand')
});

});

実例:(私のCSSを気にしないでください、視覚的に明確にするために要素にいくつかのダミーのcssを置きます）

http://jsfiddle.net/QHa7M/1/

于 2011-09-20T14:42:53.680 に答える
0

siblings()うまくいかないという呼びかけ（私はあなたがたくさんの.promo要素を持っていると思います）。このようなことをします：

$('.promo').bind('mouseover', function () {
    $('.item').removeClass('promoExpand');
    $(this).find('.item').addClass('promoExpand');
});
于 2011-09-20T14:39:40.277 に答える
0

これは別のオプションです。アクティブなアイテムを最初に設定してから、すべてのプロモーションボックスとスイッチクラスを繰り返し処理します。

$(document).ready(function(){
    $('.promo').mouseenter(function() {
        $('.promo').each(function() {
             $(this).removeClass('active');
        });
        $(this).addClass('active');
    });
 });

例： http： //jsfiddle.net/QHa7M/21/

私はそれがあなたが望むものだと思います！

于 2011-09-20T15:57:23.113 に答える