html - 如何放置页面的按钮(在顶部菜单栏中)特定图像？

Question

让我解释一下..

我在 ul 中有一个顶部菜单栏，在每个 li 中，a 标签内有一个 div 标签。我的每个 div 标签都有一个背景图片。当您将鼠标悬停在其上时，它会发生变化。这是我的问题:

例如，如果用户在第一页上，我如何将我的第一个 li img 放在悬停状态。而且，当用户在第二页时，如何始终将它放在我的第二个按钮上悬停的状态？我认为它可以用 php 来实现，但我真的不记得了!!我环顾四周，到目前为止还没有答案。谢谢大家!

HTML:

<div id="topmenu">
                        <ul>
                            <li><a href="index.php"><div id="accueil"></div></a></li>
                            <li><a href="contact.php"><div id="contact"></div></a></li>
                            <li><a href="inventaire.php"><div id="inventaire"></div></a></li>
                            <li><a href="demande.php"><div id="demande"></div></a></li>
                            <li><a href="moncompte.php"><div id="moncompte"></div></a></li>
                        </ul>
                    </div>

我的CSS:

#accueil {
background:url('../images/top_menu.png') no-repeat -180px 0;
width:129px;
height:31px;
float:left;
}

#accueil:hover {
background:url('../images/top_menu.png') no-repeat -1px 0;
width:129px;
height:31px;
float:left;
}

#contact {
background:url('../images/top_menu.png') no-repeat -180px -33px;
width:101px;
height:31px;
float:left;
}

#contact:hover {
background:url('../images/top_menu.png') no-repeat -16px -33px;
width:101px;
height:31px;
float:left;
}

#inventaire {
background:url('../images/top_menu.png') no-repeat -180px -66px;
width:111px;
height:31px;
float:left;
}

#inventaire:hover {
background:url('../images/top_menu.png') no-repeat -10px -66px;
width:111px;
height:31px;
float:left;
}

#demande {
background:url('../images/top_menu.png') no-repeat -180px -99px;
width:175px;
height:31px;
float:left;
}

#demande {
background:url('../images/top_menu.png') no-repeat -180px -99px;
width:175px;
height:31px;
float:left;
}

#demande:hover {
background:url('../images/top_menu.png') no-repeat -1px -99px;
width:175px;
height:31px;
float:left;
}

#moncompte {
background:url('../images/top_menu.png') no-repeat -180px -132px;
width:137px;
height:31px;
float:left;
}

#moncompte:hover {
background:url('../images/top_menu.png') no-repeat -1px -132px;
width:137px;
height:31px;
float:left;
}

Answer 1

这不是火箭科学人。在求助于社区之前，您可能应该多考虑一些跳出框框的问题。

不管怎么说...

将 .current-page CSS 类添加到悬停规则，并在它是当前页面时将其附加到元素....

#contact:hover, #contact.current-page {
background:url('../images/top_menu.png') no-repeat -16px -33px;
width:101px;
height:31px;
float:left;
}

<ul>
       <li><a href="index.php"><div id="accueil"></div></a></li>
       <li><a href="contact.php" class="current-page"><div id="contact"></div></a></li>
       <li><a href="inventaire.php"><div id="inventaire"></div></a></li>
       <li><a href="demande.php"><div id="demande"></div></a></li>
       <li><a href="moncompte.php"><div id="moncompte"></div></a></li>
</ul>