Trouble with a CSS rollover Please Help

Having a little trouble with a dis-jointed CSS rollover.
The link:
http://www.pressdat.com/mtw2/Mercs/Mercenary_Crossbowmen.html

I’m using <a href=“#”></a> for the rollover with a <span>.
Everything works just fine as long as none of the links are actually clicked, which is bound to happen. If they are clicked, it breaks. It’s like the background image gets stuck in the “rollover” state at background-position: 0 0.

my css:


#navlist {
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
height: 300px;
float: left;
position: relative;
top: 0px;
left: -5px;
width: 160px;
 }



#navlist li {
list-style: none;
margin: 3px 0 0 10px;
display: block;
position: relative;
top: 0px;
left: 3px;
width: 156px;
text-align: center;
font-style: italic;
}

#navlist li a {
font: bold 1.2em/1.6em Arial, Helvetica, sans-serif;
background: #fff;
text-decoration: underline;
 }

#navlist li a:link { color: #000; }
#navlist li a:visited { color: #000; }
#navlist li a:hover,
#navlist li a:active,
#navlist li a:focus {
	color: #ff0000;
	visibility: visible; }

#navlist li a span {
visibility:hidden;
display:block;
position: absolute;
color:#000;
width: 411px;
height: 250px;
}



#defaultImage {
visibility:visible;
display:block;
position: absolute;
margin: 0 0 0 200px;
width: 411px;
height: 250px;
background-image:url(../Mercs/images/regions/base.jpg) ;
}



#navlist li a:hover span,
#navlist li a:active span,
#navlist li a:focus span {
	visibility:visible;
    background-image:url(../Mercs/images/regions/rollover_16_BIG.png) ;
    top: -20px; left: 191px;
	display: block;
	}



#navlist li a:hover span#scot { background-position: 0 0; ; }
#navlist li a:hover span#ire  { background-position: 0 -250px;   }
#navlist li a:hover span#wales { background-position: 0 -500px;   }
#navlist li a:hover span#n_germany { background-position: 0 -750px; }
#navlist li a:hover span#s_germany { background-position: 0 -1000px; }
#navlist li a:hover span#n_italy { background-position: 0 -1250px;  }
#navlist li a:hover span#e_balkans { background-position: -411px -250px; }
#navlist li a:hover span#e_greece { background-position: -411px -500px; }
#navlist li a:hover span#anatolia { background-position: -411px -750px; }

My HTML for the effected part:



<div id="defaultImage">
<img src="http://www.sitepoint.com/forums/images/regions/base.jpg"></div>


<ul id="navlist">
<li class="reg_head">Available in:</li>
<li><a href="#">Scotland <span id="scot"></span></a>
<br />
<a href="#">Ireland <span id="ire"></span> </a>
<br />
<a href="#">Wales <span id="wales"></span></a>
<br />
<a href="#">Northern Germany <span id="n_germany"></span></a>
<br />
<a href="#">Southern Germany <span id="s_germany"></span></a>
<br />
<a href="#">Eastern Balkans <span id="e_balkans"></span></a>
<br />
<a href="#"><span id="wales"></span></a>
</li>
</ul>
<br clear="all" />


What can I do to prevent this?

HI,

You’re setting the active and focus states which means that while the link is clicked or has focus then the rollover remians visible.


#navlist li a:active, #navlist li a:focus

Just remove those and leave the hover effect if that’s all you want.

Paul, I tried that.
I changed


navlist li a:link { color: #000; }
#navlist li a:visited { color: #000; }
#navlist li a:hover,
#navlist li a:active,
#navlist li a:focus {
	color: #ff0000;
	visibility: visible; }


To


navlist li a:link { color: #000; }
#navlist li a:visited { color: #000; }
#navlist li a:hover {
	color: #ff0000;
	visibility: visible; }


and it didn’t make a difference.

and it didn’t make a difference.

Wait one…

I removed the :active and :focus from the span as well and that seems to have fixed it.

Thanks so much!!!

I’m still seeing the code in your live page so I can’t check.


#navlist li a:hover span, [B]#navlist li a:active span, #navlist li a:focus span[/B]{
    background-image: url("../Mercs/images/regions/rollover_16_BIG.png");
    display: block;
    left: 191px;
    top: -20px;
    visibility: visible;


}



Remove that code and I’ll check if there is some other issue.

Or is it a specific browser you are having problems with?

Yes sorry, I meant the span in my first post :slight_smile:

Just beware that doing so can screw some keyboard navigators from being able to use your links…

Of course if people are clicking on the links then it should be taking you somewhere, in which case does it matter if the state stays on? (shakes head, goes to look at page in question) – ok, you don’t have those anchors actually going anywhere – once you make them go someplace, that would be a non-issue… of course if they aren’t going anyplace, why are you using anchors?

Well, in this case, when the state stayed “on” the rollover image was screwed. It continued to highlight Scotland.
As far as using anchors… are there other ways to do css rollovers? I’m just a novice and every tutorial I pulled up showed using anchors to achieve a rollover.

Yes you have to use anchors if you want to support IE6 as it only understand hover on anchors. You could use any element for more modern browsers.

The set up is a little confusing as you have a list of underlined text which looks as though it should be links but in fact is just text. Usually with a disjointed rollover like that you would have a destination to go to such as the area you highlighted on the map. However, you are just using it for a visual display. I don’t think its a big issue but maybe don’t underline the text on the side so people don’t think its a link.

Ok Paul.
That probably would look better.
Thanks.