如何在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 选择器级别 4：

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

: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>