0

我正在尝试创建一个比 css（显然是我）可以管理的更复杂的效果。

这个想法是让 5 个 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

这是另一个选项，将您的活动项目设置为开始，然后悬停遍历所有促销框并切换类。

$(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 回答
0

调用siblings()won't 工作（我假设你有很多.promo元素）。做这样的事情：

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