Link to home
Start Free TrialLog in
Avatar of Robert Francis
Robert Francis

asked on

Hover state works but active state won't

Here is my CSS code:

#menu1 {      
      background-image: url(images/bg_menu1.png);
      height:200px;
      width:100px;
      float:left;

}

#menu1:hover{      
      background-position: 0 -200px;
}

#menu1:active{      
      background-position: 0 -200px;
}

Here is my HTML code:

 <div id="menu1"><a id="menu1" href="index.html" title="Home"></a></div>

Any ideas would be greatly appreciated.

princeservice-441741.flv
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

I think you may be confusing the CSS 'active' pseudo element with a particular navigation item seeming like it's selected.

the pseudo class applies as you click on a link. Once you unclick you are back in hover mode. move your mouse off it and you're back to link mode.

The way to set your chosen nav item as selected is to add a class to it for each page, and then style that class.
//If page 1 is active then add a class
a.selected { font-weight:bold; }

<a class="selected" href="">Page 1</a>
<a href="">Page 2</a>
<a href="">Page 3</a>
<a href="">Page 4</a>

Open in new window

What are you expecting 'active' to do?  'active' is only in effect from the time you click on it until the page changes.  It does not show the current page link.
Avatar of Robert Francis
Robert Francis

ASKER

OK, I see now that I didn't understand active. So why now when I hit the home button it blinks. Here is the link:

http://robertgfrancis.com/bob/index

Here is the CSS:

#menu1 {      
      background-image: url(images/bg_menu1.png);
      height:200px;
      width:100px;
      float:left;
}

#menu1 a:hover {background-position: 0 -200px;}

#menu1 a:active {background-position: 0 -200px;}

If you leave you mouse over the link when it changes pages, the mouse position is not recognized until you move or click it.  Then it changes.
OK, I really don't know what to say at this point. I am starting to get upset that this is so damn difficult. All I want is for the link to stay dark after I click it. Then when I hover over the other links (which will turn dark) and click on another, it will turn dark, and stay dark and the rest will go light.

Every example uses unordered list. I am using DIVS. Is this just not possible without re doing everything?

The example about by Chris only changes the font weight.
"If you leave you mouse over the link when it changes pages, the mouse position is not recognized until you move or click it.  Then it changes."

My question is why does it switch to light real quick in the first place.
OK, Problem still not solved but I have noticed some differences with browsers:

Chrome - Turns dark during hover. On click it turns light, then dark real quick (without moving the mouse)
FF - Turns dark during hover. On click it turns light and won't turn dark until you move the mouse
IE - It kills me to say this, but it actually works right in IE. It turns dark during hover. On click it stays dark until I move the mouse off the button. No blinking, No need to move the mouse to make it stay dark.

Once again, I want it to stay dark after I move the mouse off the button until I change pages.

Thanks
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
The only way you'll get it to stay dark without loading the next page is to add a class using Javascript
Because you have reloaded the page by clicking on the link which causes it to go back to the normal state until your mouse moves or clicks.  You're really not going to see the 'active' state since you only have two images.  This simple page below will show you the four possible states.

If you want a link to be/stay dark because it is the current page, you have to add a class to that link on it's own page like Chris showed you.  Each page would have that class on it's own link.  With a scripting language you could do some other things but that is beyond this question.

It is not difficult but you don't yet understand how it works.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
a:link {color:#FF0000;text-decoration: none;}      /* unvisited link */
a:visited {color:#00FF00;text-decoration: none;}  /* visited link */
a:hover {color:#8800FF;text-decoration: underline;}  /* mouse over link */
a:active {color:#0000FF;font-weight: bold;}  /* selected link */
 
-->
</style>
</head>
<body>
<a href="#">Here is the link to this page.</a>
</body>
</html>

Open in new window

This is exactly what I wanted. Thanks.