CSS классы не работают - разные классы, одна и та же функция

Question

CSS классы не работают - разные классы, одна и та же функция

0

Я новичок в webdevelopment и веб-дизайне, и сейчас я пытаюсь его изучить.

Я хотел использовать разные стили наведения для каждой кнопки меню в моем списке меню, реализованном с помощью классов css. Но это не работает. При наведении ничего не происходит.

С моей первой попытки (без классов и просто написания li: hover {...} в моем листе css он работал отлично. Вот мой код:

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

Вот код css:

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);

Спасибо за вашу помощь, я очень ценю это.

Maaaario 22 сен. 2013, в 20:59

Источник

Теги:

html

css

2 ответа

Ещё вопросы

Prisoner · Answer 1 · 2013-09-22T16-03-00.000Z

Ваши классы должны выглядеть так:

li.classX:hover{

прочитайте документацию о селекторах CSS.

Mooseman · Answer 2 · 2013-09-22T16-26-00.000Z

.class0 li:hover должен быть li.class0:hover. Ваш первый селектор потребует, чтобы li был дочерним элементом элемента с классом class0.

Я оптимизировал ваш 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);
}