-1

For example when hovering on an element it would also be as if I'm hovering over at the other element but at the same time.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
noobsaibot
  • 11
  • 1
  • 4
  • 2
    share your real use case and explain what you want to achieve, don't explain what you think is the solution that need to be done. Probably it's not the solution you need. – Temani Afif Mar 03 '19 at 21:43
  • You can't "trigger" anything with CSS. Please provide an example of the HTML you wish to achieve this with. There are only a few very specific examples where this will be achievable with CSS and the solutions will vary, depending on the HTML – Jon P Mar 03 '19 at 21:53

3 Answers3

1

Html:

<div href="#" id='1'>Hover</div>

<div id='2'>Hello I am visible</div>

Css:

#1 {
  display: block;
}

#1:hover + #2 {
  display:block;
}

#2 {
  display:none;
  }
user992731
  • 3,400
  • 9
  • 53
  • 83
1

Short of layering the two elements so the pointer is over both of them at the same time, you can't … by definition.

You might be able to write a selector which matches some other element when the first one is hovered by means of combinators, but the specifics would depend on the relationship between the elements in the DOM.

See combinators in the specification.

For example:

div div {
  margin-left: 1em;
}

div:hover {
  outline: solid red 1px;
}

div:hover~div>div {
  background: orange;
}
<div>First</div>
<div>Second</div>
<div>
  Third
  <div>Child of third</div>
</div>
<div>
  Fourth
</div>
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
1

If you mean triggering rules in some other :hover {} rule of an unhovered element, then you can't. Matching of one selector can't make another non-matching selector suddenly match.

CSS has a limited set of combinators and sibling selectors that let you express relationship between elements. This way you can select an element that is in or next to a hovered element, e.g.:

:hover + p { color: red }

&

<div>hover me</div>
<p>I'll become red</p>

And that's the best you can do. If you need it to be more complex, you'll need to use JavaScript that sets classes on other elements.

Kornel
  • 97,764
  • 37
  • 219
  • 309