jquery切换表中的背景颜色

Question

我正在尝试使用jQuery进行交互式菜单练习。到目前为止，我有我的下拉菜单，以及一个包含一些元素的边桌。

所以我的下拉菜单中还有4个元素。我的目标如下：当鼠标位于我的下拉菜单中的first元素上时，表格中的第一个单元格将变为红色，就像在图像中一样。当鼠标位于下拉列表中的第二个元素上时，表中的第二个单元格（垂直）变为红色，第一个单元格返回其原始颜色。

到目前为止，当鼠标位于下拉菜单中的第一个元素上时，我实现了更改第一个单元格的颜色。问题是它不会改变。我用过：

$(".first-hover").hover(function(){
    $('#first').css({'backgroundColor':'red'})
});

提前谢谢你们！

Answer 1

jquerys .hover()方法接受两个函数，第一个用于鼠标悬停，第二个用于 mouseout

$(".first-hover").hover(function(){
    // Mouse Over
    $('#first').css({'backgroundColor':'red'})
}, function(){
    // Mouse Out
    $('#first').removeAttr('style');
});

Answer 2

尝试将颜色改回原始颜色。 为您的所有菜单上课。

.redclass{
  background-color:red;
}

 .blueclass{
   background-color:blue;
  }

 $(".hover").hover(function(){

    if($(".hover").hasClass('redclass'))

  {
     $(".hover").removeClass('redclass')

     $(".hover").addClass('blueclass')
  }

   $(this).addClass('redclass')

});`