how to define multiple classes' hover event in css?

Question

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

The answers got it. Also note that a space implies that the second element is a child of the first; so you are actually applying a CSS rule here to <td class="my_td">'s that only occur within <div class="my_div"> — khaverim
– khaverim, Commented Aug 26, 2012 at 18:55

Burak Serdar · Accepted Answer · 2019-10-27 18:06:22Z

72

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
}

edited Oct 27, 2019 at 18:06

Burak Serdar

52.5k4 gold badges54 silver badges74 bronze badges

answered Aug 26, 2012 at 18:46

mewm

1,27710 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chris Over a year ago

@omega When an answer resolves your issue, click the green tick next to it to mark it as "accepted."

techie_28 Over a year ago

can we have only one :hover for both TD and DIV?

Irf Over a year ago

Strangel!!. 4 correct and similar answers, answered on the same day, same time! Luckily the mouse has "hovered" to your answer and marked it as "accepted" : ) +1

mash · Accepted Answer · 2012-08-26 18:46:21Z

11

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

answered Aug 26, 2012 at 18:46

mash

15.3k3 gold badges32 silver badges36 bronze badges

Comments

Ankur · Accepted Answer · 2012-08-26 18:46:46Z

9

This should work

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

answered Aug 26, 2012 at 18:46

Ankur

12.8k7 gold badges40 silver badges68 bronze badges

Comments

heximal · Accepted Answer · 2012-08-26 18:46:41Z

8

try

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

answered Aug 26, 2012 at 18:46

heximal

10.5k5 gold badges49 silver badges73 bronze badges

Comments

Stickers · Accepted Answer · 2021-08-27 17:44:59Z

7

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>

answered Aug 27, 2021 at 17:44

Stickers

79.1k24 gold badges157 silver badges195 bronze badges

3 Comments

jong park Over a year ago

i know this isn't the specific answer that the OP was looking for, but this is how you SHOULD right it to DRY up code. Upvote.

AlpacaRG Over a year ago

This is exactly the answer I was looking for! Thank you

David Spector Over a year ago

I don't understand what where does that a simple comma doesn't do.

Nicolas Boutin · Accepted Answer · 2016-08-04 13:22:30Z

-3

You should separate CSS classes and events this way :

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

answered Aug 4, 2016 at 13:22

Nicolas Boutin

383 bronze badges

2 Comments

j b Over a year ago

This isn't valid CSS

nCardot Over a year ago

Specifically it's Sass

Collectives™ on Stack Overflow

how to define multiple classes' hover event in css?

6 Answers 6

3 Comments

Comments

Comments

Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related