如果链接处于活动状态，则使悬停颜色保持不变答案

【问题标题】：Making hover color stay if link is active如果链接处于活动状态，则使悬停颜色保持不变
【发布时间】：2012-05-10 19:12:08
【问题描述】：

我正在开发一个使用 PHP、HTML 和 CSS 的网站。目前在我的导航栏中，我已将背景颜色设置为灰色。当用户将鼠标悬停在导航栏上时，每个链接都会获得蓝色背景，但是当我单击链接时，背景颜色会变回灰色。如果该特定链接处于活动状态，如何使悬停颜色保持蓝色。

这是我的导航栏的代码。

<tr>
<td width="800" height="54">
<div id="nav" >
<ax><b><font face="Arial" ><a style="text-decoration: none; color:#303030" href="index.php" >HOME</a></font></b></ax>
<bx><b><font face="arial" ><a style="text-decoration: none; color:#303030" href="edituser.php?own=y">IT</a></font></b></bx>
<cx><b><font face="arial" ><a style="text-decoration: none; color:#303030" href="newsevents.php">HUMAN RESOURCE</a></font></b></cx>
<dx><b><font face="arial" ><a style="text-decoration: none; color:#303030" href="industries.php">PROCUREMENT</a></font></b></dx>
<ex><b><font face="arial" size="1"><a style="text-decoration: none; color:#303030" href="http://www.csmphilippines.com/aboutus.html">FINANCE</a></font></b></ex>
<fx><b><font face="arial" ><a style="text-decoration: none; color:#303030" href="hact.php">HACT</a></font></b></fx>
</div>
</td>

这是我的 CSS 代码

#nav {
text-decoration:none;
padding-bottom:10px;
border-bottom:none;
width:
}

#nav ax {
display:inline;
padding:15px;
padding-left:31px;
padding-right:28px;
background-color:#ececec;
text-decoration:none;
}

#nav bx {
display:inline;
padding:15px;
padding-left:45px;
padding-right:45px;
background-color:#ececec;
text-decoration:none;
}

#nav cx {
display:inline;
padding:15px;
padding-left:45px;
padding-right:45px;
background-color:#ececec;
text-decoration:none;
}

#nav dx {
display:inline;
padding:15px;
padding-left:45px;
padding-right:45px;
background-color:#ececec;
text-decoration:none;
}

#nav ex {
display:inline;
padding:15px;
padding-left:53px;
padding-right:53px;
background-color:#ececec;
text-decoration:none;
}

#nav fx {
display:inline;
padding:15px;
padding-left:30px;
padding-right:30px;
background-color:#ececec;
text-decoration:none;
}

#nav ax:hover {
background-image:url(images/tabbackit.jpg); 
background-repeat:repeat-x;
height:900px;
}


#nav bx:hover {
background-image:url(images/tabbackit.jpg); 
background-repeat:repeat-x;
height:900px;
}
#nav cx:hover {
background-image:url(images/tabback.jpg); 
background-repeat:repeat-x;
height:900px;
}

#nav dx:hover {
background-image:url(images/tabbackproc.jpg); 
background-repeat:repeat-x;
height:900px;
}
#nav ex:hover {
background-image:url(images/tabbackfin.jpg); 
background-repeat:repeat-x;
height:900px;
}

#nav fx:hover {
background-image:url(images/tabbackhact.jpg); 
background-repeat:repeat-x;
height:900px;
}

【问题讨论】：

用户点击链接后是跳转到新页面，还是动态加载数据？
如果我正确，它会转到一个新页面。例如，当用户点击 Home 时，他会跳转到 index.php
当它们在 index.php 上时，您希望主页链接的样式不同吗？
没有什么不同，但我希望悬停样式保持不变，直到 index.php 处于活动状态
“直到 index.php 处于活动状态”是什么意思？

标签： php html css hover

【解决方案1】：

我这样做的方法是在body标签中为每个页面赋予自己的id：

<body id="pgAbout">

然后为每个菜单项设置一个单独的 id：

<li id="mnuAbout">

使用 CSS，您现在可以为您所在的页面设置链接样式：

#pgAbout #mnuAbout,
#pgOther #mnuOther
{
   /* Styles here */
}

Here's a brief demo

更新

Here's another demo 使用你自己的 HTML 来说明它是如何工作的。

【讨论】：

我可以使用 class="Home" 代替 Id 吗？我试过了，还是不行
如果你愿意，你可以使用类。你到底尝试了什么？
我为你的答案添加了一个演示链接@Coozekz
首页
然后在 css 中，我写了.. #nav .Home ax{ ... } 但它不起作用

【解决方案2】：

您可以做的一个简单的事情是为所有页面使用相同的样式表，但使用不同的 CSS 类来突出显示每个页面上的相应链接。例如，在 index.php 上，使用 .active 类来突出显示 Home 链接。

既然你是新人（如你所说），让我们分解一下：

对所有页面使用相同的 CSS。但是，为导航栏元素定义两个 CSS 类：一个是.regular 状态，另一个是.active 状态。在每个页面中，将与该页面对应的链接指定为活动类，而其他链接保留在常规类中。

但是，你想让它保留一个链接吗？

【讨论】：

我不确定哈哈，还是 PHP 和 CSS 的新手。我只是想如果用户在该特定链接上，是否有办法让悬停颜色/背景保持不变，在他点击导航栏中的这些按钮之一之后
我理解你的问题。那我就为你详细解释一下答案。

【解决方案3】：

很简单，只需输入以下代码例如，在主页上，将以下代码放入 HEAD

<style type="text/css">
    #nav ax{
        background-image:url(images/tabbackit.jpg); 
        background-repeat:repeat-x;
    }
</style>

【讨论】：

所以我把它放在 PHP 文件中？但是我设置的初始样式是这样的...
哦，等等，忽略我的评论，我刚刚明白你说的。我试试看，秒
您是否意识到这只是我的代码的一个不太易于管理的版本？
我先试用了他的版本，然后才能做你的，但感谢一百万的帮助：D