I made a navigation tab (here is the url if you would like to see it http://i.imgur.com/FnjEoYH.png) and I am now trying to make each tab "highlight" (one example is the home tab http://i.imgur.com/VoU48Fk.png) whenever a mouse is hovered over it and go back to normal when mouse is not longer hovering. I know about onmouse and hover but I just can't seem to think of anything. Does anyone have any ideas? There are 5 different tabs that need to be highlighted. Any help is greatly appreciated.

Member Avatar

diafol

Use CSS, no need for js.

:hover

Maybe you forgot to put that:

<link rel="stylesheet" type="text/css" href="your_style_file.css" />

in your html page.

I could try that because now that I think of it I don't think I did, but instead I did:

<style>#home{...} #home:hover{...}</style>
Member Avatar

diafol

Well it works perfectly for me

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#home {
   background-image: url('http://i.imgur.com/FnjEoYH.png');
   height: 65px;
   width: 1000px;
}
#home:hover {
   background-image: url('http://i.imgur.com/VoU48Fk.png');
}

</style>
</head>
<body>
<div id="home"></div> 
</body>
</html>

However, this looks cookey. You've got "whole nav" images swapping on hover - I guess you're not going to do that for real.
Your nav may be better off with a class instead of an id or mybe none at all...

<ul id="nav">
    <li>home</li>
    <li class="active">news</li>
    <li>about us</li>
    <li>forums</li>
    <li>contact us</li>
</ul>

With something like the following:

#nav li{
    color: red;
}

#nav li.active, #nav li:hover{
    color: orange;
}

The "buttons" you show in the image can be created using just CSS - it now has widespread support for rounded corners, shadows, gradients and animation. IE is still a party-pooper though.

Is there any chance you could help me out with this, because I can't seem to figure out how to use CSS to make the design look like that. Because I need the design to look just like that.

Member Avatar

diafol

Have you removed the image? Can't see it anymore. From what I remember, you had a red background and rounded white borders (bottom only) with white text.

That's pretty basic CSS.

Make the li elements

display:inline-block;

And provide padding and margins to align them to each other

Just change the colours slightly on :hover

The border-radius:

-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;

If you absolutely have to have the same look in old IE, use Modernizr or similar.

Thank you so much diafol, you helped so much, you don't even know. I went off the last reply you posted and created the navigation bar almost exactly like the navigation bar in photoshop. You have been a great help. Thanks. Also for anyone who would like to see it now or would like to a solution to this here is the code...

HTML

<html>

<head>
    <link rel="stylesheet" type="text/css" href="hover.css" />
</head>

<body>
    <center><div id="navcontainer" style="width:1000px; margin: -8px 0px" align="left">
        <img src="images\navbarborder.png"><img>
        <ul style="margin:0; height:50px; padding:0; width:1000px; background:linear-gradient(#e41010, #ea7575); border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;">
            <a href="www.ceracygames.com" style="text-decoration:none; color: white"><li class="navbar">Home</li></a>
            <a href="" style="text-decoration:none; color: white"><li class="navbar">News</li></a>
            <a href="" style="text-decoration:none; color: white"><li class="navbar">About Us</li></a>
            <a href="" style="text-decoration:none; color: white"><li class="navbar">Forums</li></a>
            <a href="" style="text-decoration:none; color: white"><li class="navbar">Contact Us</li></a>
        </ul>
    </div></center>
        </body>

</html>

CSS

li.navbar{
    display:inline-block;
    margin: 0px 25px;
    border-width: 0px 2px 2px 2px;
    border-color: black;
    border-style: solid;
    padding: 11px 27px 11px 27px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    background:linear-gradient(#de4d4d, #de1818, #e91010);
    font-family:Arial, Helvetica, sans-serif;
}
li.navbar:hover{
    display:inline-block;
    margin: 0px 25px;
    border-width: 0px 2px 2px 2px;
    border-color: black;
    border-style: solid;
    padding: 11px 27px 11px 27px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    background:linear-gradient(#ff3333, #ff6666, #ff9999);
    font-family:Arial, Helvetica, sans-serif;
}
body{
    background-color: black;
}