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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Dec 2009
    Posts
    240
    Thanks
    7
    Thanked 0 Times in 0 Posts

    How Do I add a Hover in the css to the images on all navbar?

    Alright guys

    I am in the process of adding a navigation bar to my website, I will be using images for the navigation such as home, about us, affiliates, contact me, etc..

    I would like to write some code in the css that corresponds to the Navagation section that when you move the mouse over them it will change color, and then when you have selected on it changes color to..

    I have attempted to do it myself.. But at the moment the hover commands only works on text, not images..

    Code:
    /************************************************
    
    *	Navbar      								*
    
    ************************************************/
    
    
    
    #navbar {
    
    	background: url(images/navbar.jpg);
    
    	width: 920px;
    
    	height: 35px;
    
    	color: #FFFFFF;
    
    	margin: 0px auto 0px;
    
    	padding: 0px;
    
    	}
    
    #nav {
    
    	margin: 0px 0px 0px 15px;
    
    	padding: 0px;
    
    	list-style: none;
    
    	}
    
    	
    
    #nav ul {
    
    	margin: 0px;
    
    	padding: 0px;
    
    	list-style: none;
    
    	}
    
    
    
    #nav a {
    
    	background: #2B2B2B;
    
    	color: #FFFFFF;
    
    	display: block;
    
    	font-size: 10px;
    
        font-weight: normal;
    
        text-transform: uppercase;
    
        margin: 0px 15px 0px 0px;
    
    	padding: 11px 10px 11px 10px;
    
    	}
    
    	
    
    #nav a:hover {
    
    	background: #666666;
    
    	color: #FFFFFF;
    
    	display: block;
    
    	text-decoration: none;
    
        margin: 0px 15px 0px 0px;
    
    	padding: 11px 10px 11px 10px;
    
    	}
    
    
    
    #nav li {
    
    	float: left;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	}
    
    	
    
    #nav li li {
    
    	float: left;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	width: 140px;
    
    	}
    
    	
    
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    
    	background: #2B2B2B;
    
    	width: 140px;
    
    	float: none;
    
    	margin: 0px;
    
    	padding: 8px 10px 8px 10px;
    
    	border-top: 1px solid #C0C0C0;
    
    	}
    
    	
    
    #nav li li a:hover, #nav li li a:active {
    
    	background: #666666;
    
    	padding: 8px 10px 8px 10px;
    
    	}
    
    
    
    #nav li ul {
    
    	position: absolute;
    
    	width: 10em;
    
    	left: -999em;
    
    	}
    
    
    
    #nav li:hover ul {
    
    	left: auto;
    
    	display: block;
    
    	}
    
    	
    
    #nav li:hover ul, #nav li.sfhover ul {
    
    	left: auto;
    
    	}

  • #2
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    hey check out this tutorial... was a bunch of help for me....
    http://www.webvamp.co.uk/blog/coding...age-rollovers/


    or you could google css sprites

    slightly more awesome solutions....



    but to answer your question add background-image: url(hoverimage.gif); to your a:hover, a:active, a etc. using a different image for each... hope that makes since..
    the sprite method and tutorials i provided supply a full solution to your problem, and are probably easier to follow. if you would like further explanation and don't want to use the sprite method, i can clarify what i meant wit the background-image thing if you would like...


    ps. the sprites are cooler use them! :-D
    Last edited by edub629; 12-16-2009 at 05:09 AM.


  •  

    Posting Permissions

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