单击元素并加载网站时保持css悬停答案

【问题标题】：Keep css hover when element is clicked and site is loading单击元素并加载网站时保持css悬停
【发布时间】：2012-07-23 13:28:28
【问题描述】：

网站导航html：

<div class="main_nav">
    <div><a href="home/">Home</a></div>
    <div><a href="company/">Company</a></div>
    <div class="active"><a href="franchise/">Franchise</a></div>
</div>

当链接悬停时，它会获得特定的背景颜色。

我的问题是，如何在加载点击的页面并且仍然显示旧页面时保持这种悬停状态？我的意思是你悬停一个链接项目，背景改变，你点击背景改变为默认值，新网站开始加载。

当新页面加载速度很快时，这不是必需的，因此您不会真正看到差异。但是我很想知道这是否可能仅使用 css 技术。

有什么想法吗？

我的 CSS：

.header_wrapper .main_nav div a:link{
  display:block;
  text-decoration:none;
  color:#f5f5f5;
}

.header_wrapper .main_nav div.active a:link{
  color:#f5f5f5;
  background: url(images/layout/main_nav_bg_hover.png) repeat-x;
}

.header_wrapper .main_nav div a:hover{
  color:#f5f5f5;
  background: url(images/layout/main_nav_bg_hover.png) repeat-x;
}

.header_wrapper .main_nav div a:focus{
  color:#f5f5f5;
  background: url(images/layout/main_nav_bg_hover.png) repeat-x;
}

【问题讨论】：

在你的锚标签中使用了焦点元素
a:focus {/*样式放在这里*/;}
请将此作为答案发布并举例说明。我尝试集中注意力，但没有成功。

标签： html css

【解决方案1】：

嘿，现在习惯像这样聚焦属性

a:focus{
// css properties 
}

直播demo

【讨论】：

【解决方案2】：

像这样试试..

如果你的<a> 标签有一个类，那么就使用这个：

a.classname:focus {
   color: /*whatever you want*/ ;
}

如果你想申请所有<a> 而不是使用这个：

a:focus {
   color: /*whatever you want*/ ;
}

【讨论】：

【解决方案3】：

试试这个：

<div class="<?=($_REQUEST['args'] == 'franchise')?'active': ''?>"><a href="franchise/">Franchise</a></div>

【讨论】：

从来没有说过有人在使用 PHP。