CODEWITHSUNDEEP
htmlcss
omega
omega

Reputation: 43833

how to define multiple classes' hover event in css?

In css how can I define multiple class' hover events to use the same properties. This doesn't seem to work:

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

Thanks

Upvotes: 42

Views: 94418

Answers (6)

Stickers
Stickers

Reputation: 78676

Take look at CSS Selectors Level 4:

The :where() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.

The difference between :where() and :is() is that :where() always has 0 specificity, whereas :is() takes on the specificity of the most specific selector in its arguments.

:where(.a, .b):hover {
  outline: 1px solid red;
}
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

It also works with selecting child elements:

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

Upvotes: 7

mewm
mewm

Reputation: 1277

You should separate with a comma, like this:

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

Upvotes: 72

Nicolas Boutin
Nicolas Boutin

Reputation: 38

You should separate CSS classes and events this way :

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

Upvotes: -3

Ankur
Ankur

Reputation: 12774

This should work 

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

Upvotes: 9

heximal
heximal

Reputation: 10517

try

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

Upvotes: 8

mash
mash

Reputation: 15229

Add a comma in between: .my_div:hover, .my_td:hover.

Upvotes: 11

Related Questions