I'm new to the world of web development and design, embarking on a journey to learn all I can in these fields.
Recently, I attempted to create unique hover styles for each menu button within my CSS classes-based menu list. However, I encountered an issue as nothing happens when I hover over the buttons.
In my initial attempt, I achieved the desired hover effect without using classes by simply writing `li:hover {...}` directly in my CSS stylesheet. Here is a snippet of my code:
<div id="menu">
<ul style="padding-top:80px;" >
<li class="class0"> <p style="padding-left:17px; padding-top:10px;">Main</p></li>
<li class="class1"> <p style="padding-left:19px; padding-top:10px;">About</p></li>
<li class="class2"> <p style="padding-left:22px; padding-top:10px;">Minigames</p></li>
<li class="class3"> <p style="padding-left:25px; padding-top:10px;">Exit</p></li>
</ul>
</div>
Below is the snippet from my CSS code:
li {
color:white;
font-weight:normal;
font-size:x-large;
height:60px;
}
.class0 li:hover {
background-repeat:no-repeat;
color:black;
font-weight:800;
background-image: url(./img/menu_hover_0.png);
}
.class1 li:hover {
background-repeat:no-repeat;
color:black;
font-weight:800;
background-image: url(./img/menu_hover_1.png);
}
.class2 li:hover{
background-repeat:no-repeat;
color:black;
font-weight:800;
background-image: url(./img/menu_hover_2.png);
}
.class3 li:hover{
background-repeat:no-repeat;
color:black;
font-weight:800;
background-image: url(./img/menu_hover_0.png);
Your assistance with this issue would be greatly appreciated. Thank you in advance!