Question

我是网络开发和网页设计的初学者，我现在正在努力学习它。

我想为使用css类实现的菜单列表中的每个菜单按钮执行不同的悬停样式。但它不起作用。在悬停时，没有任何反应。

在我的第一次尝试（没有课程，只是在我的css表中写li：hover {...}时，它完美无缺。这是我的代码：

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

感谢您的帮助，我真的很感激。

Answer 1

您的课程应如下所示：

li.classX:hover{

通读documentation关于CSS选择器。

Answer 2

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

CSS类不工作 - 不同的类，相同的功能

2 个答案: