当一个：hover时，具有多个类的CSS不起作用

Question

我正在尝试使用:hover属性构建具有与另一个样式相同的CSS类。 问题在于，仅当我将元素放在元素上时，才应用样式，而不是在指定新类的地方。

这是我的尝试：

.body_cal .cell_cal:hover .bg_cal, 
.body_cal .cell_cal .bg_cal .hover_cal {
  opacity: 0.2;
  transition: .3s ease-in;
}

我希望通过添加hover_cal类来获得与将鼠标移到该类上相同的结果。

Answer 1

通过将.hover_cal与.cell_call:hover伪类以相同的顺序放置，可以达到相同的效果：

.body_cal .cell_cal:hover .bg_cal, 
.body_cal .hover_cal .bg_cal{
  opacity: 0.2;
  transition: .3s ease-in;
}