Can you help me out with some advice? I'm working on a navigation bar that has a dropdown button. Each item in the dropdown menu has a small image with an opacity animation applied to it. When you hover over the image, it becomes visible and vice versa. My issue is figuring out how to properly associate each item with its corresponding image so that the image also shows up when hovering over the item. Should I handle this in HTML or CSS?
Here's a snippet of my code:
.dropdown-content {
cursor: auto;
display: none;
width: auto;
position: fixed;
right: 2%;
overflow: hidden;
border-radius: 10px;
background-color: #cddc39;
font-size: large;
}
/**ODKAZY: TEXT */
.bar-item {
border-color: #cddc39;
color: #cddc39;
background-color: white;
padding: 10px 10px;
width: fit-content;
display: block;
float: left;
text-align: left;
text-decoration: none;
}
.klik {
vertical-align: baseline;
text-align: left;
border-right: 40px;
width: 25px;
height: 25px;
background-color: white;
transition: all 0, 25s ease-out;
opacity: 0;
}
.klik:hover,
.bar-item:hover {
opacity: 1;
}<div class="navbar dropdown-click">
<div class="dropdown-click">
<button class="w3-button" onclick="myFunction()">
<img class="topnav-pic menu" src="images/icon-navbar.png" alt="navigation button"/>
</button>
<div id="demo" class="dropdown-content">
<a href="#pt_about" class="bar-item"><img class="klik" src="images/favicon.png">about me</a>
<a href="#pt_studium" class="bar-item"><img class="klik" src="images/favicon.png">study</a>
<a href="#pt_prace" class="bar-item"><img class="klik" src="images/favicon.png">my work</a>
<a href="#para" class="bar-item"><img class="klik" src="images/favicon.png">hobbies</a>
</div>
</div>
</div>