CSS/HTML Active/Hover (Active doesnt work)

Question

Heey,

i got a problem, i have to make a webpage for a project, im not an experienced programmer or web-developer and im having a problem with the active CSS.

the purpose is that when i hover my mouse over the sidemenu it would change color, and when it is clicked the color will stay the same as the hover color, the hover part worked when i hover my mouse over the side menu tab (partners) it changes color but when i click it, the color doesnt change it goes away the second i get my mouse off the side menu tab.

Here is my code i hope someone can help me out, i know its a messy code. 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>

and here the CSS of that class:

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

hope anyone knows.

When you change the webpage, the background will still go away. If you really want this you should find a way to know that the user redirected and clicked through that link and change it on that page. Just so you know when you notice that the answers below don't work. — nkmol, Jan 02 '14 at 16:00

score 1 · Accepted Answer · answered Jan 02 '14 at 15:57

1

The :active pseudo selector will match when an element is currently being pressed down on by the mouse cursor. It's usually only seen for a split second, and provides visual feedback that the element was indeed clicked.

One choice would be to use a:visited but that will color each link you have pressed.

Or use a bit of jaavscript to add a class to the attribute and then set a color against that class.

answered Jan 02 '14 at 15:57

Chris

805
6
19

i have tried visited but it stil doesnt work when i click on it and then click on an other page nothing changes it doesnt take the color it supposes to do – Jenny Pouwels Jan 02 '14 at 16:02
but i got enough comments to work it out further you were right about the active i shall use the other one Thx! – Jenny Pouwels Jan 02 '14 at 16:06
Check out this page http://stackoverflow.com/questions/7566238/how-to-make-css-aactive-work-after-the-click the jquery example half way down the page showing $('#navigation a').click(function(){ should be your easiest solution – Chris Jan 02 '14 at 16:08

score 0 · Answer 2 · answered Jan 02 '14 at 15:49

0

try this way:

.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));}

and one question, are you using PHP or only HTML?

answered Jan 02 '14 at 15:49

Ricardo Alves

642
2
13
34

im using HTML for this website – Jenny Pouwels Jan 02 '14 at 15:51
have you tried the changes? try giving the hover to the div, and not to the "a" – Ricardo Alves Jan 02 '14 at 15:53
the answer from @Chris Bertrand is correct, also try seeing this jsFiddle and it might help you [jsfiddle](http://jsfiddle.net/RG93F/) – Ricardo Alves Jan 02 '14 at 16:00

score 0 · Answer 3 · answered Jan 02 '14 at 15:56

0

I think you are wrong with the concept of :active

The :active pseudo-class applies while an element is being activated by the user.

This only work for a few miliseconds doesn't stay after the click event:

For example, between the times the user presses the mouse button and releases it.

Info from W3 wikki.

answered Jan 02 '14 at 15:56

DaniP

37,813
8
65
74

isnt there a way that the TAB stays inlighted? when its on that page? – Jenny Pouwels Jan 02 '14 at 15:59
With pure JavaScript or Jquery maybe depends on the condition you want – DaniP Jan 02 '14 at 16:02

score 0 · Answer 4 · edited May 23 '17 at 12:30

Browsers can view changing the background of a visited link a violation of user privacy as demonstrated here: background-image: for :visited links?

A little jquery would do the trick:

$('.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/

also, active means while clicked, I think you were looking for :visited, which is the property after a link has been clicked.

CSS/HTML Active/Hover (Active doesnt work)

4 Answers4