html - 如何在css中定义多个类的悬停事件？

Question

在 css 中，如何定义多个类的悬停事件以使用相同的属性。这似乎不起作用：

.my_div:hover .my_td:hover {
    border: 1px solid red;
}

谢谢

Answer 1

您应该用逗号分隔，如下所示：

.my_div:hover, .my_td:hover {
      border: 1px solid red;
}
.contact-dpd:hover .contact-content, .work-dpd:hover .work-content{
     display:block
}

Answer 2

中间加逗号：.my_div:hover, .my_td:hover.

Answer 3

这应该工作

.my_div:hover, .my_td:hover {
        border: 1px solid red;
}

Answer 4

尝试

.my_div:hover, .my_td:hover {
    border: 1px solid red;
}

Answer 5

看看 CSS 选择器 Level 4：

:where()CSS 伪类函数将选择器列表作为其参数，并选择可以由该列表中的选择器之一选择的任何元素。

:where()和之间的区别在于:is()它:where()始终具有 0 特异性，而:is()在其参数中采用最具体的选择器的特异性。

:where(.a, .b):hover {
  outline: 1px solid red;
}

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

它也适用于选择子元素：

:where(header, footer) p:hover {
  outline: 1px solid red;
}

:where(main, aside) p:hover {
  outline: 1px solid blue;
}

:where(header, footer) a {
  color: red;
}

b, i {
  color: green;
}

main :where(b, i) {
  outline: 1px solid;
  color: black;
}

<header>
  <p>header <a href="#">link</a></p>
</header>
<main>
  <p>main <a href="#">link</a> <b>bold</b> <i>italic</i></p>
</main>
<aside>
  <p>aside <a href="#">link</a> <b>bold</b> <i>italic</i></p>
</aside>
<footer>
  <p>footer <a href="#">link</a></p>
</footer>

Answer 6

您应该以这种方式分离 CSS 类和事件：

.my_div, .my_td {
  &:hover {
    border: 1px solid red;
  }
}