camouflage nav border on hover?

Hypn01991

10-29-2010, 06:52 PM

hello again cf members,

i'd like to know how to change the colour of my navigation link borders on hover? when i hover on nav links from left to right the border is not visible as i've assigned the same colour as the hover background colour to the border like so:

.nav-links li a:hover
{
color: #fff;
background-color:#1473e8;
border-left-color: #1473e8;
border-right-color: #1473e8;
}

=

http://i54.tinypic.com/sngx28.png

however the border is still visible when hovering from right to left:

http://i54.tinypic.com/33uv8t4.png

here is the full html/css code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/master.css" rel="stylesheet" type="text/css" />
<title>Home</title>
</head>

<body id="home">
<div id="page-container">
<div id="main-nav">
<ul class="nav-links">
<li><a href="index.html" id="homenav" title="Home">Home</a></li>
<li><a href="services.html" id="servnav" title="Services">Services</a></li>
<li><a href="products.html" id="prodnav" title="Products">Products</a></li>
<li><a href="about.html" id="aboutnav" title="About Us">About Us</a></li>
<li class="borderx2"><a href="contact.html" id="contnav" title="Contact">Contact</a></li>
</ul>
</div>

#main-nav
{
clear:both;
float:left;
padding-left:10px;
}
.nav-links li
{
float: left;
list-style-type: none;
display:block;
}
.nav-links li a
{
float: left;
width: 85px;
height: 41px;
text-decoration: none;
text-transform: capitalize;
color: #1473e8;
background-color:#fff;
font-size: 12px;
text-align: center;
padding-top: 25px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #e4e4e4;

}
.nav-links li a:hover
{
color: #fff;
background-color:#1473e8;
border-left-color: #1473e8;
border-right-color: #1473e8;
}
li.borderx2
{
border-right-width: 1px;
border-right-style: solid;
border-right-color: #e4e4e4;
}
body#home a#homenav,
body#services a#servnav,
body#products a#prodnav,
body#about a#aboutnav,
body#contact a#contnav
{
color: #fff;
background: #1473e8;
}

i hope you understand wat im trying to achieve & thank you for your time

abduraooft

10-30-2010, 07:37 AM

however the border is still visible when hovering from right to left:
I can't see that border separately from bg color on hover! If you want to ensure it, copy all the hover styles and apply to the normal state selector at the end, to override existing ones, like
.nav-links li a
{
float: left;
width: 85px;
height: 41px;
text-decoration: none;
text-transform: capitalize;
color: #1473e8;
background-color:#fff;
font-size: 12px;
text-align: center;
padding-top: 25px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #e4e4e4;
background-color:#1473e8;
border-left-color: #1473e8;
border-right-color: #1473e8;
color: #fff;

}and check again.

Hypn01991

10-30-2010, 07:56 AM

I can't see that border separately from bg color on hover! If you want to ensure it, copy all the hover styles and apply to the normal state selector at the end, to override existing ones, like
.nav-links li a
{
float: left;
width: 85px;
height: 41px;
text-decoration: none;
text-transform: capitalize;
color: #1473e8;
background-color:#fff;
font-size: 12px;
text-align: center;
padding-top: 25px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #e4e4e4;
background-color:#1473e8;
border-left-color: #1473e8;
border-right-color: #1473e8;
color: #fff;

}and check again.

thanks but i dont think you understood me, i'd like the border to be visible in #e4e4e4 colour in its normal state but appear as #1473e8 on hover :o

copying the hover styles and applying to normal state selector would make the background of each link #1473e8 which i do not want

abduraooft

10-30-2010, 08:06 AM

thanks but i dont think you understood me, i'd like the border to be visible in #e4e4e4 colour in its normal state but appear as #1473e8 on hover

copying the hover styles and applying to normal state selector would make the background of each link #1473e8 which i do not want What I'm saying is, I get your intended result with your original css.

Hypn01991

10-30-2010, 08:25 AM

What I'm saying is, I get your intended result with your original css.

strange, im not getting that :(

edit: the border only appears whilst hovering over the item next to the current page can u confirm if the border is not visible when hovering over the item next to the current selection from either side?

Hypn01991

11-01-2010, 10:38 AM

..BUMP..

any takers?

SB65

11-01-2010, 01:58 PM

If I've understood this, in the non-hovered state each of your menu elements has a white left border. On :hover, you're setting the colour of the border to be blue.

So, on :hover, the left border of the hovered element effectively disappears. However, the left border of the next element in the menu does not disappear, since the next item has no :hover state applied. Hence there is an apparent white border on the right of the hovered element.

What you're asking is, when an element receives :hover, is there any way of changing the css of an adjacent element. Short answer is no, using css.

You could do this with javascript, or you could redesign your layout to apply the border differently.

Hypn01991

11-01-2010, 02:11 PM