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
  • 329 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Bensirpent07

Dani AI

Generated

As @Member120589 noted, pure CSS is the simplest fix and was right to remind you to actually link the stylesheet. ’s final post shows the look you wanted — a few small changes will make that solution more robust, accessible and easier to maintain.

Keep the markup semantic and valid (do not wrap an <li> with an <a>; put the <a> inside the <li>), move inline styles into a stylesheet, and use the anchor as the hover/focus target so keyboard users can access the same state. Example markup:

<nav aria-label="Primary">
  <ul class="nav">
    <li><a href="/home">Home</a></li>
    <li><a href="/news" aria-current="page">News</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Use CSS transitions and combined :hover / :focus rules for smooth, accessible feedback. This keeps the effect for keyboard users and helps on touch devices when focus is applied:

.nav { list-style:none; margin:0; padding:0; display:flex; gap:20px; }
.nav a {
  display:inline-block;
  padding:10px 22px;
  color:#fff;
  text-decoration:none;
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
  background:linear-gradient(#c62828,#e53935);
  transition: background .18s ease, transform .12s ease;
}
.nav a:hover,
.nav a:focus {
  background:linear-gradient(#ff5f5f,#ff8a8a);
  transform:translateY(-2px);
  outline:none;
}

If your design relies on images, prefer a single sprite or SVG icons and change background-position or fill rather than swapping full images (reduces flicker and HTTP requests). Troubleshooting checklist: confirm the CSS file is linked, clear cache, inspect the element in devtools to see computed styles and stacking context, ensure the hover target has display and padding, and add an explicit :focus rule for keyboard users.

Recommended Answers

All 8 Replies

Member Avatar for Member #120589

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 Member #120589

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 Member #120589

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.