jquery之后，单击函数悬停不工作

我最近开始学习jQuery，现在我被这个问题困扰着， 一切正常，但单击函数后执行jquery悬停函数不工作

$（函数（）{
$（“div.star”）.hover（函数（）{
$（this.addClass（“星形悬停”）；
});
$（“div.star”）.mouseout（函数（）{
$（this.removeClass（“星形悬停”）；
);
});
$（函数（）{
$（“div.star”）。单击（函数（）{
$（此）.addClass（“星选”）；
});
})；

.star{
高度：2米；
宽度：2米；
边框：1米纯黑色；
边界半径：1.1米；
显示：内联块；
保证金：0；
填充：.1em；
}
.星星悬停{
背景颜色：蓝色；
}
.被选中的明星{
背景色：红色；
}

---

当元素同时具有类

星形悬停

和

星形选择

时，应用哪种

背景色

确实是个问题

为什么不直接使用css

：悬停

：

.star {
   height: 2em;
   width: 2em;
   border: .1em solid black;
   border-radius: 1.1em;
   display: inline-block;
   margin: 0;
   padding: .1em;
  }

 .star:hover  {
   background-color: blue;
  }

  .star-chosen {
   background-color: red;
  }

.star-hover {
   background-color: blue !important;
 }

你的js：

$(function(){
  $("div.star").click(function(){
    $(this).addClass("star-chosen");
  });
});

如果您正在寻找jQuery方法，则必须将

！important

添加到

星形悬停

：

.star {
   height: 2em;
   width: 2em;
   border: .1em solid black;
   border-radius: 1.1em;
   display: inline-block;
   margin: 0;
   padding: .1em;
  }

 .star:hover  {
   background-color: blue;
  }

  .star-chosen {
   background-color: red;
  }

.star-hover {
   background-color: blue !important;
 }

---

但是我更喜欢

：hover

解决方案

在CSS中编写.star hover after.star选择它可以帮助您

为什么要添加悬停类？它可以使用CSS 请参阅此解决方案：

$（“div.star”）。单击（函数（）{
$（此）.addClass（“星选”）；
})；

.star{
高度：2米；
宽度：2米；
边框：1米纯黑色；
边界半径：1.1米；
显示：内联块；
保证金：0；
填充：.1em；
}
.被选中的明星{
背景色：红色；
}
.星星：悬停{
背景颜色：蓝色；
}

谢谢@Khanh TO css:hover很好，但我正在查看jQuery的方式：）@Joy07:那么你必须添加

！重要的