Question

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

我们的想法是让5个DIV中的一个在页面加载时处于活动状态，然后直到另一个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>

感谢所有人的帮助，

汤姆

Answer 1

siblings会查找具有相同父级的元素，看起来您的.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.
    });
});

Answer 2

对siblings()的调用不起作用（我假设你有很多.promo元素）。做这样的事情：

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

Answer 3

试着看看这个：

javascript :(我首先删除了所有promoexpand类，然后将其添加到正在悬停的类中）

$(document).ready(function(){

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

});

工作示例:(不介意我的CSS，我在元素上添加一些虚拟css以便在视觉上澄清）

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

Answer 4

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

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

实施例： http://jsfiddle.net/QHa7M/21/

我认为这就是你想要的！

使用jquery创建粘滞悬停效果

4 个答案: