Alex M. Alex M. - 21 days ago 6
CSS Question

How to add two hover effects to same div

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

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!