How to add two hover effects to same div

Question

So, I have a div that appears at the top of my screen, and when you hover over it, at the bottom of the screen, text appears.

I want to add another effect to the div that makes more text appear in a completely different place on the screen, while the other text stays in the same place.

Is that possible? Preferably using CSS/HTML instead of Java or anything?

Answer 1

You can use ~ (tilde) operator to target all your siblings (all should have the same parent) show on hover. Please have a look at the example snippet below:

 body { margin: 0; } .holder { text-align: center; height: 100vh; } .hover { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); color: red; font-size: 30px; font-weight: bold; border: 2px solid red; padding: 10px 15px; cursor: default; transition: all .2s linear; } .hover:hover { background: rgba(255, 0, 0, 0.1); } .hover:hover ~ .show-text { opacity: 1; transition: all .2s linear; } .show-text { position: absolute; opacity: 0; font-size: 20px; border-bottom: 1px solid #aaa; transition: all .2s linear; } .one { bottom: 20%; left: 20%; } .two { bottom: 20%; right: 20%; } 

 <div class="holder"> <div class="hover">Hover Me!</div> <div class="show-text one">I'm Text 1</div> <div class="show-text two">I'm Text 2</div> </div> 

Hope this helps!