CODEWITHSUNDEEP
htmlcss
Maaaario
Maaaario

Reputation: 103

CSS classes not working - different classes, same function

I'm a beginner in webdevelopment and webdesign and I'm currently trying to learn it.

I wanted to do different hover styles for every menu-button in my menu list realized with css classes. But it's not working. On hover, nothing happens.

On my first attempt (without classes and just writing li:hover {...} in my css sheet it worked perfect. Here is 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>

Here is the 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);

Thanks for your help, i really appreciate it.

Upvotes: 0

Views: 62

Answers (2)

Mooseman
Mooseman

Reputation: 18891

.class0 li:hover should be li.class0:hover. Your first selector would require the li to be a child of the element with class class0.

I optimzied your CSS:

li{
    color:white;
    font-weight:normal;
    font-size:x-large;
    height:60px;
}
li:hover{
    background-repeat:no-repeat;
    color:black;
    font-weight:800;

li.class0:hover, li.class3:hover{
    background-image: url(./img/menu_hover_0.png); /* The image was the same for class3, so I combined them */
}
li.class1:hover{
    background-image: url(./img/menu_hover_1.png);
}
li.class2:hover{
    background-image: url(./img/menu_hover_2.png);
}

Upvotes: 1

Prisoner
Prisoner

Reputation: 27618

Your classes should look like this:

li.classX:hover{

read through the documentation regarding CSS selectors.

Upvotes: 2

Related Questions