CODEWITHSUNDEEP
htmlcsshover
Jenny Pouwels
Jenny Pouwels

Reputation: 3

CSS/HTML Active/Hover (Active doesnt work)

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.

Upvotes: 0

Views: 1402

Answers (4)

RyanY
RyanY

Reputation: 665

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.

Upvotes: 0

Chris
Chris

Reputation: 825

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.

Upvotes: 1

DaniP
DaniP

Reputation: 38252

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.

Upvotes: 0

Ricardo Alves
Ricardo Alves

Reputation: 652

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?

Upvotes: 0

Related Questions