Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    camouflage nav border on hover?

    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:

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




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




    here is the full html/css code

    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>
    Code:
    #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
    Last edited by Hypn01991; 10-30-2010 at 08:13 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    Code:
    .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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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
    Code:
    .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

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

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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?
    Last edited by Hypn01991; 10-30-2010 at 10:13 AM.

  • #6
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    ..BUMP..



    any takers?

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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.
    Last edited by SB65; 11-01-2010 at 03:03 PM.

  • Users who have thanked SB65 for this post:

    Hypn01991 (11-01-2010)

  • #8
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    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.
    thank u sir


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •