Question

当我将鼠标悬停在div上时，我试图切换一些css。通常我会使用＆＃39; toggleclass＆＃39;但新的背景颜色似乎没有覆盖现有的类，所以我采用了下面的方法。

问题是如何在悬停后关闭css。

$('#menu_first_home').hover(function(){
$(this).css({ 'border': '10px solid rgba(186, 0, 0, 0.2)' });
$('.search-box').css({ 'background-color': 'rgba(186, 0, 0, 0.5)', 'color': 'rgba(186, 0, 0, 0.5)'    });
});

Answer 1

ToggleClass应该可以工作，但是这里有一个代码来改变mouseleave上的css属性

$('#menu_first_home').hover(

function () { // Mouseenter
    $(this).css({
        'border': '10px solid rgba(186, 0, 0, 0.2)'
    });
    $('.search-box').css({
        'background-color': 'rgba(186, 0, 0, 0.5)',
        'color': 'rgba(186, 0, 0, 0.5)'
    });
}, function(){ // Mouseleave
    $(this).css({
        'border': '10px solid rgba(186, 0, 0, 0.2)'
    });
    $('.search-box').css({
        'background-color': 'rgba(186, 0, 0, 0.5)',
        'color': 'rgba(186, 0, 0, 0.5)'
    });

});

Answer 2

您可以拥有边框和背景颜色的CSS类。添加/删除它们以便悬停和关闭，如下所示 -

CSS -

.borderClass{border: 10px solid rgba(186, 0, 0, 0.2);}

.backgroundColorClass{background-color: rgba(186, 0, 0, 0.5);
                      color: rgba(186, 0, 0, 0.5);}

jQuery -

$('#menu_first_home').hover(function(){
   //for hover on
   $(this).addClass("borderClass");
   $('.search-box').addClass("backgroundColorClass");
},function(){
   //for hover off
   $(this).removeClass("borderClass");
   $('.search-box').removeClass("backgroundColorClass");
});

Answer 3

您可以使用jquery悬停方法和css类来解决它。 悬停方法接受两个回调函数，一个指针在项目上移动时，一个在它离开时：

$(item).hover(function() { ... }, function() { ... });

不是动态添加样式，而是在css文件中定义它：

#menu_first_home.hoverClass {
    border-color: rgba(186, 0, 0, 0.2);
}

并在悬停时，将该类（例如＆＃34; hoverClass＆＃34;）添加到该特定元素，并在鼠标移除时删除它。

这是live working demo。

切换css而不使用toggleclass

3 个答案: