How do you display a particular element on hover? - html

Question

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">Yearly Donations</li>
<li class="event">Events</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>

Answer 1

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">Yearly Donations</li>
<li class="event">Events</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>

Answer 2

You could call a Javascript function on hover. I'm sure there are better ways, but this works for example:
function displayYearly() {
document.getElementById("yearly").style.display = "inline-block";
}
function hideYearly() {
document.getElementById("yearly").style.display = "none";;
}
function displayEvento() {
document.getElementById("evento").style.display = "inline-block";
}
function hideEvento() {
document.getElementById("evento").style.display = "none";
}
#yearly {
display: none;
}
#evento {
display: none;
}
<div class="listo">
<ul>
<li class="year" onmouseover="displayYearly()" onmouseout="hideYearly()">
Yearly Donations
</li>
<li class="event" onmouseover="displayEvento()" onmouseout="hideEvento()">
Events
</li>
</ul>
</div>
<div class="content">
<div id="yearly">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon#2.png" alt="Photo" width="100px">
</div>
<div id="evento">
<p>trial</p>
</div>
</div>