Question

基本上，当您在该网站上时，我希望链接的悬停状态保持活动状态。我希望我能解释这一点。当您访问该特定页面时，该链接背后应该有背景。

这是html的代码：

<div class="menudiv">
<div id="menu">
    <ul id="menu">
      <li><a href="?p=start"><span>Hem</span></a></li>
      <li><a href="?p=omoss"><span>Om oss</span></a></li>
      <li><a href="?p=tjanster"><span>Tjänster</span></a></li>
      <li><a href="?p=referenser"><span>Referenser</span></a></li>
      <li><a href="?p=kontakt"><span> Kontakt</span></a></li>
    </ul>
  <div class="clr"></div>
  </div>
  </div>

这是css：

#menu { float:right; padding:23px 0 0 0; margin:0; width:420px; height:35px;}
#menu ul { text-align:right; padding:0; margin:0; list-style:none; border:0; height:35px;}
#menu ul li { float:left; margin:0; padding:0 5px; border:0; height:35px;}
#menu ul li a { float:left; margin:0; padding:10px 0; color:#5c8783; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
#menu ul li a span { padding:10px 13px; background:none;}
#menu ul li a:hover { background:url(images/r_menu.gif) right no-repeat;}
#menu ul li a:hover span { background:url(images/l_menu.gif) left no-repeat;}
#menu ul li a:active { background:url(images/r_menu.gif) right no-repeat;}
#menu ul li a:active span{ background:url(images/l_menu.gif) left no-repeat;}

Answer 1

为该链接添加一个CSS类（例如<a class="CurrentPage">），然后将选择器应用于该类（例如#menu ul li a:active, a.CurrentPage）

Answer 2

我知道hover属性应该放在CSS中的最后一个（在活动和其他之下）才能正常工作。

Answer 3

你给的是同一个人：

  <div id="menu">
     <ul id="menu">

这是错误的

你应该使id不同。

Answer 4

您基本上需要将css类添加到菜单中的a标记。例如：

<li><a href="?p=start" class="currentPage"><span>Hem</span></a></li>

根据您对该菜单项的设计

，为您的currenPage类添加样式

现在，您的页面应该是动态的，您可以将currenPage css类设置为当前用户当前正在查看的菜单项

示例：

<li><a href="?p=start" class="<?php if(/**check if the user is in this link/menu item**/) echo "currentPage"; ?>" ><span>Hem</span></a></li>

如何使链接在CSS中保持活动状态？

4 个答案: