CSS / HTML活动/悬停(活动不起作用)

时间:2014-01-02 15:43:53

标签: html css hover

Heey,

我遇到了一个问题,我必须为一个项目创建一个网页,我不是一个有经验的程序员或网络开发人员,而且我对活动的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
}

希望有人知道。

4 个答案:

答案 0 :(得分:1)

当一个元素当前被鼠标光标按下时,激活的伪选择器将匹配。它通常只能在瞬间看到,并提供视觉反馈,确实元素被点击。

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

或者使用一些jaavscript为该属性添加一个类,然后针对该类设置一个颜色。

答案 1 :(得分:0)

尝试这种方式:

.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?

答案 2 :(得分:0)

我认为你对:active

的概念有误
  

:当用户激活元素时,将应用active伪类。

在点击事件发生后,这只能持续几毫秒:

  

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

来自W3 wikki的信息。

答案 3 :(得分:0)

浏览器可以查看更改受访链接的背景,违反用户隐私,如下所示: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/

另外,主动意味着在点击时,我认为您正在寻找:已访问,这是链接被点击后的属性。