0

I have two elements and I'd like to trigger the hover of second element when the first element is hovered over.

Example: 

#element1 {
  border: 1px solid rgba(80,80,80, .5);
}

#element2 {
  margin-top: 10px;
  padding-top: 10px;
  border: 1px solid rgba(80,80,80, .5);
}

/* suggested proposal */
#element1:hover >> #element2:hover {
   font-weight: bold;
}
<div id="element1">
  Hover over this element for more info
</div>


<div id="element2">
   Here is more info
</div>

I'd like to know if it's possible yet OR if there any plans for this in CSS specification. If there's no proposals I can suggest something like #myElementId:hover >> #mySecondElementID:hover.

There are a few related questions to this but acknowledges that it is not possible and with the new follow feature people can follow for any updates.

Related Questions:

Triggering :hover on second element when hovering on first

Do not close. This is not the same as the other questions. It is asking about current status, future specification and gives a place to answer.

UPDATE:
It looks like I can select any element as the second element as long as it's sibling or a descendant of the first element.

enter image description here

Reference to combinators:
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

Update: The question is specifically about selecting a second element any where on the page. The current answers will work as long as the mentioned conditions are met.

1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231
  • 1
    #element1:hover + #element – user0101 May 29 '20 at 08:50
  • It looks like I can select any element as the second element as long as it's sibling or a descendant of the first element. This question is different than others in that it is asking to specify any element. – 1.21 gigawatts May 29 '20 at 09:28
  • How is it different? you just accepted the answer about the `+` selector and I gave 2 duplicate about it and 2 other about more selector and also about the fact that there is no previous selector. The duplicates cover all the possible cases of hover – Temani Afif May 29 '20 at 09:35
  • You're right. I unaccepted it. I've updated the question. – 1.21 gigawatts May 29 '20 at 09:35
  • even if you unaccept it, the duplicates still apply because it gaves you all the possible ways with CSS. More than that is impossible with CSS and you need JS – Temani Afif May 29 '20 at 09:36
  • But I mentioned in the first part, "I'd like to know if it's possible yet OR if there any plans for this in CSS specification." There are two answers that would be "Not it's not possible to select any element" as you stated and I acknowledged or "Yes it's possible now using...". Since it may be possible in the future then an answer can appear here. – 1.21 gigawatts May 29 '20 at 09:39
  • There won't be any way in the future (at least for few years) and even if there is a new way it should belong to the duplicate target. The first one is asking *How to affect other elements when one element is hovered* and your case can be included there. – Temani Afif May 29 '20 at 09:42
  • for your information, here is the Draft of the next Level of CSS selector: https://www.w3.org/TR/selectors-4/ .. you will find a lot of new selectors and nothing about what you want. This is still a Draft and need some times to become a standard and a new Spec (the Level 5) will require years to be done and not sure if such selector will be defined there. – Temani Afif May 29 '20 at 09:45

2 Answers2

2

Use the adjacent sibling combinator(+).

#element1 {
  border: 1px solid rgba(80,80,80, .5);
}

#element2 {
  margin-top: 10px;
  padding-top: 10px;
  border: 1px solid rgba(80,80,80, .5);
}

#element1:hover + #element2{
   font-weight: bold;
}
<div id="element1">
  Hover over this element for more info
</div>


<div id="element2">
   Here is more info
</div>

To effect both elements on hover...

#element1 {
  border: 1px solid rgba(80,80,80, .5);
}

#element2 {
  margin-top: 10px;
  padding-top: 10px;
  border: 1px solid rgba(80,80,80, .5);
}

#element1:hover,
#element1:hover + #element2{
   font-weight: bold;
}
<div id="element1">
  Hover over this element for more info
</div>


<div id="element2">
   Here is more info
</div>
Turnip
  • 35,836
  • 15
  • 89
  • 111
  • 1
    There is also the [general sibling combinator (`~`)](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator) – Turnip May 29 '20 at 08:59
  • 1
    Yes, order in the DOM is important. You can not select backwards with CSS. – Turnip May 29 '20 at 09:03
  • It looks like I can select any element as the second element as long as it's sibling or a descendant of the first element. https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator – 1.21 gigawatts May 29 '20 at 09:25
1

Hello use the "+" selector to manage his sibbling.

#element1 {
  border: 1px solid rgba(80,80,80, .5);
}

#element2 {
  margin-top: 10px;
  padding-top: 10px;
  border: 1px solid rgba(80,80,80, .5);
}

#element1:hover+#element2 {
   font-weight: bold;
}
<div id="element1">
  Hover over this element for more info
</div>


<div id="element2">
   Here is more info
</div>
Nico
  • 518
  • 2
  • 11