如何在 hover 上显示特定元素？

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"><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>

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"><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>

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()"> <a href="#">Yearly Donations</a> </li> <li class="event" onmouseover="displayEvento()" onmouseout="hideEvento()"> <a href="#">Events</a> </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>