Javascript 在具有StopRopAgation和/或preventDefault的元素上应用jQuery

项目链接：

http://50.87.144.37/~projtest/wp/ziva/?page_id=7

我已经在页面上应用了owl转盘来显示产品。布局如下：

当用户将鼠标悬停在产品上时，白色覆盖将向下滑动，布局如下：

我正在应用以下JS：

$('.owl-item .item').hover(function(){

    $(this).find('.itemHover').animate({
        top:0,
        opacity:1
        }, 700)
    setTimeout(function () {    

    $(this).find('.dressName, .dressLinks').animate({
        top:0,
        opacity:1
        },500)
    }, 501);

})

但它不起作用。这很可能是因为owl carousel插件中有多个stopPropagation和/或preventDefault函数。有没有办法在产品上应用我想要的jQuery

链接到插件的js:

http://50.87.144.37/~projtest/wp/ziva/wp-content/themes/ziva/js/owl.carousel.js

---

好的，如果您将下面的代码放在index.css上，您将使用css获得悬停效果

.item:hover>.itemHover {
    top: 0;
    opacity: 1;
}

.item:hover>.itemHover>.dressName {
    top: 0;
    opacity: 1;
}

.item:hover>.itemHover>.dressLinks {
    top: 0;
    opacity: 1;
}

---

好的，如果您将下面的代码放在index.css上，您将使用css获得悬停效果

.item:hover>.itemHover {
    top: 0;
    opacity: 1;
}

.item:hover>.itemHover>.dressName {
    top: 0;
    opacity: 1;
}

.item:hover>.itemHover>.dressLinks {
    top: 0;
    opacity: 1;
}

---

尝试使用上的进行

委派

，因为在运行代码时元素尚未就绪

$(document).on('mouseenter','.owl-item .item',function(){

});

$(document).on('mouseleave','.owl-item .item',function(){

});

---

尝试使用上的进行

委派

，因为在运行代码时元素尚未就绪

$(document).on('mouseenter','.owl-item .item',function(){

});

$(document).on('mouseleave','.owl-item .item',function(){

});

---

最好通过css3转换来制作这些动画（IE8及以下版本不支持）。 唯一的区别是，在那些旧浏览器中，动画不会显示出来，但功能会按预期工作

将以下css规则添加到css文件：

.itemHover {
    -webkit-transition: all 1s;
    -moz-webkit-transition: all 1s;
    transition: all 1s;
}

.owl-item:hover .itemHover {
    opacity: 1;
    top: 0;
}

---

最好通过css3转换来制作这些动画（IE8及以下版本不支持）。 唯一的区别是，在那些旧浏览器中，动画不会显示出来，但功能会按预期工作

将以下css规则添加到css文件：

.itemHover {
    -webkit-transition: all 1s;
    -moz-webkit-transition: all 1s;
    transition: all 1s;
}

.owl-item:hover .itemHover {
    opacity: 1;
    top: 0;
}

---

在firebug works的控制台中应用JS。您是否缺少$（function（）{Your code here}）；在你的js文件中？这是在document ready函数中调用的，我会尝试你的方法，给我一分钟。你想要一种CSS方法吗？在将其放入该文件中后也没有更改。@Matheus，如果无法使用jQuery，那么当然，请让我知道。它会有一些动画/过渡吗？在firebug的控制台中应用JS可以工作。您是否缺少$（function（）{Your code here}）；在你的js文件中？这是在document ready函数中调用的，我会尝试你的方法，给我一分钟。你想要一种CSS方法吗？在将其放入该文件中后也没有更改。@Matheus，如果无法使用jQuery，那么当然，请让我知道。它会有一些动画/过渡到它吗？