jquery - jQuery mouseenter效果不起作用

当我使用jQuery colored filter时，我想应用mouseenter（在CSS中）效果。 mouseenter必须应用于侧边栏（具有class="sidebar"）。

由于某些原因，在侧边栏上时，我无法使mouseenter正常工作。
在这种情况下，羽毛，文本和侧栏需要着色。

请帮助。

有关更多信息，请参见此小提琴：http://fiddle.jshell.net/897mC/2/

最佳答案

我有一个working sample here，可以为羽毛和顶杆实现所需的效果。

通过将display设置为none，您无法控制CSS类是否适用于元素。

当CSS类中有display: none时，就是说任何具有该类的HTML元素都不会显示。

您应该根据需要从目标元素中添加和删除所需的类：

$("#home_top").mouseenter(function () {
    $("#topBar").removeClass("sGray");
    $("#topBar").addClass("sColor");
    $("#featherOne, #featherTwo").removeClass("fGray");
    $("#featherOne, #featherTwo").addClass("fColor");
});

$("#home_top").mouseleave(function(){
    $("#topBar").removeClass("sColor");
    $("#topBar").addClass("sGray");
    $("#featherOne, #featherTwo").removeClass("fColor");
    $("#featherOne, #featherTwo").addClass("fGray");
});

为了实现所需的延迟，CSS类应包含所需属性的过渡：

-webkit-transition: filter 750ms ease-in;
       -moz-transition: filter 750ms ease-in;
        -ms-transition: filter 750ms ease-in;
         -o-transition: filter 750ms ease-in;
            transition: filter 750ms ease-in;

关于jquery - jQuery mouseenter效果不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23230864/