Home/ Questions/Q 8499773
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T00:45:32+00:00

Possible Duplicate: highlight the navigation menu for the current page I’m working on a

  • 0

Possible Duplicate:
highlight the navigation menu for the current page

I’m working on a menu consisting of several DIVs, each with a unique CSS ID. The :hover selector has been used in CSS to try to give each div a different style when its corresponding page is being viewed, but it doesn’t seem to be taking effect. My CSS and HTML can be seen in this JSFiddle. Basically, since these divs are being used to create a menu, I’d like the “active” class to be added to the div when its hyperlinked page is being viewed (when someone is on my “Home” page, I’d like the active style to be applied to the “Home” menu div).

#pagebuttonhome {
  width: 130px;
  height: 30px;
  background-color: #ffe0e8;
  position: absolute;
  overflow: hidden;
  left: 30px;
  bottom: 0px;
  font-size: 17px;
  letter-spacing: 2px;
  text-align: center;
  line-height: 30px;
  color: #dc2d18;
}
#pagebuttonhome:hover {
  background-color: #dc2d18;
  color: #ffe0e8;
  height: 40px;
  cursor: pointer;
}
#pagebuttonhome.active {
  background-color: #dc2d18;
  color: #ffe0e8;
  height: 40px;
  cursor: pointer;
}
<div id="pagebuttonhome">HOME</div>

I appreciate any help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    One way to get around it is to add a unique id to the body on each page. For example, <body id="homelink"> on the home page, <body id="aboutlink"> on your about page (if you have one) etc. Then, replace the #pagebuttonhome.active selector with 

    #homelink #pagebuttonhome,
#aboutlink #pagebuttonabout

    and it will select and highlight the link for the page you’re on without you needing to use javascript.

    http://jsfiddle.net/MEnKR/11/

    • 0