当一个是：悬停时，具有多个类的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;
}