jQuery切换表中的背景色

Question

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

因此，我的下拉菜单中也包含4个元素。 我的目标如下：当鼠标悬停在下拉菜单的first元素上时，表格中的第一个单元格变成红色，就像图像中一样。 当鼠标悬停在下拉列表中的第二个元素上时，表格中的第二个单元格（垂直）变为红色，第一个单元格返回其原始颜色。

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

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

预先谢谢你们！

Answer 1

jquerys .hover()方法接受两个函数，第一个用于mouseover ，第二个用于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')

});`