Question

让我解释..

我在ul中有一个顶级菜单栏，在每个li中，theres是一个标签内的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

如果我得到你的要求，那很简单。添加一些类来指示当前页面。

示例：

<ul>
    <li> <div /> </li>
    <li> <div /> </li>
    <li> <div class="ActivePage" /> </li>
</ul>

然后css这样的东西（这很简单，你必须在你的代码中解开它）：

div{
    background: url('image.jpeg') no-repeat top left;
}
div:hover, div.ActivePage{
    background-position: bottom left;
}

根据评论编辑TS：

如果你身边有php，请为你的商品添加评论：

<ul>
    <li><a href="index.php">     <div class="<!-- ACTIVE_index -->" id="accueil"></div></a></li>
    <li><a href="contact.php">   <div class="<!-- ACTIVE_contact -->"id="contact"></div></a></li>
    <li><a href="inventaire.php"><div class="<!-- ACTIVE_inventaire -->"id="inventaire"></div></a></li>
    <li><a href="demande.php">   <div class="<!-- ACTIVE_demande -->"id="demande"></div></a></li>
    <li><a href="moncompte.php"> <div class="<!-- ACTIVE_moncompte -->"id="moncompte"></div></a></li>
</ul>

此外，在包含header.php之前，请确保index.php知道您所在的页面。我们说$page = 'contact';

在header.php中，您可以执行以下两行：

$template = str_replace("<!-- ACTIVE_".$page." -->", 'ActivePage', $template); give the selected on the class

$template = preg_replace(/"<!-- ACTIVE_.*? -->", '', $template); // cleanup other comments

现在你有一个灵活的页面指示器代码:)这将更有意义你开始从数据库中提取项目，或以某种方式自动化它

Answer 2

这不是火箭科学家。在转向社区之前，你应该考虑一下开箱即用。

不管怎么说......

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

如何在页面的特定图像上放置一个按钮（在顶部菜单栏中）？

2 个答案: