How do you display a particular element on hover?

I'm trying to make a navigation bar that displays a particular element when hovered and clicked. I'd also like the other elements to remain hidden. I tried doing a few codes but it won't work even if I hovered it already.

.yearly {
  display: none;
}

.evento {
  display: none;
}

.year a:hover+.yearly {
  display: inline-block;
  background-color: #aacde2;
}

.event a:hover+.evento {
  display: inline-block;
  background-color: #aacde2;
  font-size: 50px;
}

<div class="listo">
  <ul>
    <li class="year"><a href="#">Yearly Donations</a></li>
    <li class="event"><a href="#">Events</a></li>
  </ul>
</div>

<div class="content">
  <div class="yearly">
    <img src="../images/pic1.jpg" alt="Photo" width="300px">
  </div>
  <div class="evento">
    <p>trial</p>
  </div>
</div>

You can achieve this using Jquery.

$(".year a").on({
  mouseover: function(e){
    $(".yearly").show();
  },
  mouseout: function(e) {
    $(".yearly").hide();
  }
});

$(".event a").on({
  mouseover: function(e){
    $(".evento").show();
  },
  mouseout: function(e) {
    $(".evento").hide();
  }
});

.yearly {
  display: none;
}

.evento {
  display: none;
}

.year a:hover + .yearly {
  display: inline-block;
  background-color: #aacde2;
}

.event a:hover + .evento {
  display: inline-block;
  background-color: #aacde2;
  font-size: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="listo">
    <ul>
      <li class="year"><a href="#">Yearly Donations</a></li>
      <li class="event"><a href="#">Events</a></li>
</ul></div>

<div class="content">
    <div class="yearly">
        <img src="../images/pic1.jpg" alt="Photo" width="300px">
    </div>
    <div class="evento">
        <p>trial</p>
    </div>
</div>

How do you display a particular element on hover?

Related

Recent Posts