CSS rollovers - want to override hover in <li> - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

CSS rollovers - want to override hover in <li>

Using unordered list for navigation

timware

12:16 am on Feb 25, 2004 (gmt 0)

I have a navigation set up where the hover state is a 2px border. For the active page I want to override this rollover so that nothing happens on the rollover. The nav is contained in <ul id="button">, and the CSS is:

#button {
width: 124px;
padding:0;
margin:0;
border:0;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
color: #FFF;
}

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#button li {
margin: 0;
}

#button li a {
display: block;
height: 22px;
padding: 5px;
color: #fff;
font-weight: bold;
text-decoration: none;
width: 100%;
line-height: 12px;
vertical-align: middle;
}

html>body #button li a {
width: auto;
}

#button li a:hover {
border: 2px solid #fc0;
padding: 3px;
color: #fff;
}

I just need the most elegant way to override. Thanks!

Tim

TheDoctor

10:30 am on Feb 25, 2004 (gmt 0)

I'm not sure if I understand you perfectly, but the easiest way to avoid the hover effect on the nav button for your current page is to omit the link from the list item. Just include the description, but no <a href=...>.

It's generally good practice not to include a link to the curent page in your navigation.

If there's some reason to have a link to your current page, then you could try identifying the nav button with its own id and overriding the hover, eg:


li#current a:hover { 
border: 0; 
padding: 0; 
}

grahamstewart

10:56 am on Feb 25, 2004 (gmt 0)

A useful technique is to give a different

id

to the

body

of each page. Then you can adjust your link hover effect based on that.

e.g.

<body id="page2"> 
  
<ul> 
  <li id="p1lnk"><a href="page1.html">1</a></li> 
  <li id="p2lnk"><a href="page2.html">2</a></li> 
  <li id="p3lnk"><a href="page3.html">3</a></li> 
</ul>


#page1 #p1lnk a:hover, #page2 #p2lnk a:hover, #page3 #p3lnk a:hover { 
  border: none; 
  padding: 5px; 
}

This technique is also useful for identifying the current page by changng the colour of the link or its background.

domokun

11:50 am on Feb 25, 2004 (gmt 0)

do a search for "max design" and "list a matic" - that'll solve all your problems

timware

4:26 pm on Feb 25, 2004 (gmt 0)

Thanks, folks. Everything was helpful. I got what I needed at Max Design (awesome site!), but I noticed someone had suggested the same fix in this thread.

Tim