css - 如何在多个元素上应用 css hover

Question

您好，我正在研究仅使用 CSS 的简单悬停。我很好奇是否可以将一个悬停应用于多个 html 元素。这是我的例子:

.work-cart{
    z-index: 4;
  position: absolute;
    width: 250px;
    height: 300px;
    left: 200px;
    opacity: 0;
    background: #fff;
    padding-right: 45px;
    padding-left: 45px;
    padding-bottom: 30px;
    padding-top: 150px;
    text-align: right;
    bottom: 0;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all: 0.8s ease;
    transitions: all 0.8s ease;
}
.f:hover > .work-cart{
   left: 220px;
    opacity: 1;
}
.g:hover > .work-cart{
   left: 220px;
    opacity: 1;
}
.h:hover > .work-cart{
   left: 220px;
    opacity: 1;
}

是否有任何选项可以同时为 .f .g 和 .h 分配悬停？

Answer 1

你可以试试

.f:hover > .work-cart, .g:hover > .work-cart, .h:hover > .work-cart{
   left: 220px;
   opacity: 1;
}