CSS/HTML 活动/悬停（活动不起作用）答案

【问题标题】：CSS/HTML Active/Hover (Active doesnt work)CSS/HTML 活动/悬停（活动不起作用）
【发布时间】：2014-01-02 15:43:52
【问题描述】：

嘿，

我遇到了一个问题，我必须为一个项目制作网页，我不是经验丰富的程序员或网络开发人员，而且我对活动 CSS 有疑问。

目的是当我将鼠标悬停在侧边菜单上时它会改变颜色，当它被单击时颜色将保持与悬停颜色相同，当我将鼠标悬停在侧边菜单选项卡上时悬停部分起作用（合作伙伴）它会改变颜色，但是当我点击它时，当我将鼠标从侧面菜单选项卡上移开时，颜色不会改变。

这是我的代码，希望有人可以帮助我，我知道它是一个混乱的代码。 CSS：

.buttonPartners a:hover{
    background: -webkit-gradient(linear, right bottom, left top, from(#585858 ), to(#A4A4A4));
}
.buttonPartners a:active { background: -webkit-gradient(linear, right bottom, left top, from(#585858 ), to(#A4A4A4));}

HTML：

<div class ="buttonPartners"><a href="Partners.html">Partners</a></div>

这里是该类的 CSS：

.buttonPartners  a{
background: -webkit-gradient(linear, left top, right bottom, from( #B40404 ), to(#FF0000));
Color: white; text-decoration: none; text-align: center; border: 2px solid black; padding: 7px;  position: absolute; font-family: verdana;
top:320px; left:30px; width:105px; height:30px
}

希望有人知道。

【问题讨论】：

当您更改网页时，背景仍然会消失。如果你真的想要这个，你应该找到一种方法来知道用户重定向并点击了该链接并在该页面上更改它。让您知道当您发现以下答案不起作用时。

标签： html css hover

【解决方案1】：

:active 伪选择器将匹配当前被鼠标光标按下的元素。它通常只出现一瞬间，并提供元素确实被点击的视觉反馈。

一种选择是使用 a:visited 但这会为您按下的每个链接着色。

或者使用一些 jaavscript 将类添加到属性，然后针对该类设置颜色。

【讨论】：

我已经尝试访问过，但是当我点击它然后点击另一个页面时它仍然不起作用，没有任何变化它没有呈现它应该做的颜色
但我有足够的 cmets 来进一步解决问题，你说得对，我应该使用另一个，谢谢！
查看此页面stackoverflow.com/questions/7566238/… jquery 示例在页面中间显示 $('#navigation a').click(function(){ 应该是您最简单的解决方案

【解决方案2】：

试试这个方法：

.buttonPartners:hover{
    background: -webkit-gradient(linear, right bottom, left top, from(#585858 ), to(#A4A4A4));
}
.buttonPartners:active { background: -webkit-gradient(linear, right bottom, left top, from(#585858 ), to(#A4A4A4));}

还有一个问题，您使用的是 PHP 还是只使用 HTML？

【讨论】：

我在这个网站上使用 HTML
您尝试过这些更改吗？尝试将鼠标悬停给 div，而不是“a”
@Chris Bertrand 的回答是正确的，也可以试试看这个 jsFiddle，它可能对你有帮助 jsfiddle

【解决方案3】：

我认为你对:active的概念有误

:active 伪类在用户激活元素时应用。

这仅在点击事件后几毫秒有效：

例如，在用户按下鼠标按钮并释放它的时间之间。

来自W3 wikki 的信息。

【讨论】：

没有办法让 TAB 保持点亮状态吗？什么时候在那个页面上？
使用纯 JavaScript 或 Jquery 可能取决于您想要的条件

【解决方案4】：

浏览器可以查看更改已访问链接的背景是否侵犯了用户隐私，如下所示：background-image: for :visited links?

一个小 jquery 就可以解决问题：

$('.buttonPartners a').click(function(){
  $(this).addClass('colored');
});

CSS：

.colored { 
   background: -webkit-gradient(linear, right bottom, left top, from(#585858 ),     to(#A4A4A4));
}

http://jsfiddle.net/4HERF/1/

另外，active 表示点击时，我认为您正在寻找 :visited，这是点击链接后的属性。

【讨论】：