How to add two hover effects to same div - html

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!