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
Robert FrancisDirector of Continuous ImprovementAsked:
Who is Participating?
 
Chris StanyonCommented:
My code was just an example. Not a solution. The normal way to achieve what you're after is to add a class to the button that you want to stay selected. It has nothing to do with :hover and :active. That class can be called whatever you want - active, selected,  hilite etc.
//On your home page your code should look like this
<div id="menu1" class="selected">....</div>
<div id="menu2">....</div>
<div id="menu3">....</div>
<div id="menu4">....</div>
<div id="menu5">....</div>

//On your phone page your code should look like this
<div id="menu1">....</div>
<div id="menu2" class="selected">....</div>
<div id="menu3">....</div>
<div id="menu4">....</div>
<div id="menu5">....</div>

In your style sheet, add a rule for the 'selected' class to set the background position

//CSS
.selected { background-position: 0 -200px; }

Open in new window

0
 
Chris StanyonCommented:
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

0
 
Dave BaldwinFixer of ProblemsCommented:
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.
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Robert FrancisDirector of Continuous ImprovementAuthor Commented:
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;}

0
 
Dave BaldwinFixer of ProblemsCommented:
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.
0
 
Robert FrancisDirector of Continuous ImprovementAuthor Commented:
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.
0
 
Robert FrancisDirector of Continuous ImprovementAuthor Commented:
"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.
0
 
Robert FrancisDirector of Continuous ImprovementAuthor Commented:
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
0
 
Chris StanyonCommented:
The only way you'll get it to stay dark without loading the next page is to add a class using Javascript
0
 
Dave BaldwinFixer of ProblemsCommented:
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

0
 
Robert FrancisDirector of Continuous ImprovementAuthor Commented:
This is exactly what I wanted. Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.