html - 单击元素并加载网站时保持 css 悬停

Question

站点导航 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;
}

Answer 1

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

a:focus{
// css properties 
}

直播demo