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

Answer 2

试试这样..

如果您的<a>标签有一个课程，请使用此课程：

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

如果您要应用所有<a>而不是使用此：

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

Answer 3

试试这个：

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

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

3 个答案: