【问题标题】:Maintain hovering color when clicking on a button单击按钮时保持悬停颜色
【发布时间】:2013-10-24 21:56:57
【问题描述】:

在我的每个帖子页面末尾的 3 个按钮上,当人们点击其中一个按钮时,我想设置一个悬停颜色。以下是 3 个按钮的示例: 在我的 PHP 文件中,这 3 个按钮位于此处:Post Page

<ul class="tabnav-widget ui-tabs-nav">
   <li class="ui-tabs-selected">
      <a class="" href="#tab1-widget">written by</a>
   </li>
   <li>
      <a class="" href="#tab3-widget">Related Posts</a>
   </li>
   <li class="">
      <a class="" href="#tab4-widget">In this Category</a>
   </li>
</ul>

但我不知道我必须修改哪个 CSS 类以及添加哪个 CSS 代码才能在单击三个按钮之一时保持悬停颜色。

提前感谢您,感谢您的帮助。

【问题讨论】:

  • 您在寻找a:active 吗?
  • 您可以使用 :hover 和 :active 伪选择器。
  • 同意,如果您保持在同一页面上,a:active 应该可以工作,显然如果您链接到另一个页面,状态会丢失并且您会看到一组新的链接。

标签: css button hover


【解决方案1】:

在 CSS 中更改它

.tabnav li:hover, .tabnav-widget li:hover {
    background: #color;
}

此外,如果您想在按下按钮时更改颜色,请使用:active

添加如下内容:

.tabnav li:active, .tabnav-widget li:active {
    background: #color;
}

【讨论】:

  • 谢谢,它有效!但是在光标离开导航方块后,无论是悬停还是点击,背景颜色都会变回原来的状态。当当前页面显示时,我希望颜色保持与悬停状态相同的颜色。我进行了详尽的搜索,但似乎没有任何效果。感谢您的帮助和您的时间!
  • @David 这在 CSS 中是不可能的。悬停仅适用于悬停,而不是相反。
猜你喜欢
  • 2015-05-15
  • 2012-03-13
  • 2021-12-21
  • 2011-11-30
  • 2016-07-20
  • 1970-01-01
  • 2020-07-06
  • 2021-06-12
  • 1970-01-01
相关资源
最近更新 更多