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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
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
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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 StanyonWebDevCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Chris StanyonWebDevCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.