Member Avatar for Bensirpent07

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.

  • 3 Contributors
  • 8 Replies
  • 320 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Bensirpent07
Member Avatar for diafol

Use CSS, no need for js.

:hover
Member Avatar for Bensirpent07

Well I tried to use that in CSS. This is what I tried but it didn't work.

<div id="home"></div> //What I put in HTML

#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');
}
Edited by Bensirpent07 because: Said something twice
Member Avatar for Alberto Bucur

Maybe you forgot to put that:

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

in your html page.

Member Avatar for Bensirpent07

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 for 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.

Member Avatar for Bensirpent07

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 for 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.

Member Avatar for Bensirpent07

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;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.