Javascript 在不使用toggleclass的情况下切换css

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

问题是如何在悬停后关闭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)'    });
});

---

您可以为边框和背景色创建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");
});

---

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)'
    });

});

---

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

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

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

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

在鼠标悬停时，将类（例如“hoverClass”）添加到该特定元素中，然后在鼠标悬停时将其删除

---

以下是使用toggle类时出现的问题。

。。。你能分享代码和css吗？你能给我们看一把小提琴吗？当你说toggle类不起作用时，是不是因为你给id分配了原始颜色，然后试图用类覆盖它？你应该使用toggleClass。如果新类中包含的规则没有正确应用，那只是因为您有CSS特定性问题。抱歉，链接错误-看起来可能会做得更短-

$（“#菜单_first_home”）.hover（function（）{$（this）.toggleClass（'borderClass'）；$（'.search box'）.toggleClass（“backgroundColorClass”）；}）

但这将仅为每个

mouseenter

事件切换类，我认为OP希望在

mouseenter

时添加颜色，并在

MouseetNet

时删除它，如果我错了，请更正我。如果在悬停时使用单个函数，它将在

MouseetNet

和

MouseetNet

上调用。看起来结果是一样的