Question

I’m doing a website where I define icons in the CSS and then I use it in HTML with a simple classes, for example this is for the dashboard:

.icon {padding-left: 22px;line-height: 16px;}

.icon-dashboard {background: url("/img/icons/dashboard_off.png") no-repeat}
.icon-dashboard:hover, .icon-dashboard:active {background: url("/img/icons/dashboard_on.png") no-repeat}

Then I can use it:

<a class="icon icon-dashboard" href="index.html">Dashboard</a>

Now I have an anchor with a icon that, when I hover takes color (off=b&w, on=color). That’s ok, all my menu is by default in off state and when hovered to on state.

The problem: this icons are for display a submenu when click that, by default, is hidden. When I click on a anchor with .icon the next <div /> is showed. That’s ok, but then when I move throw this <div /> the anchor, of course, is in off state.

I need to add a class, or something, that mantains the icon of the anchor in “on” state but I want to know if is possible to do it without rewriting the class like icon-dashboard-active. One of the main reasons is because I want to add in javascript, when clicked, a class that automatically converts to “on” state.

I wish this is better explained.

Thank you in advance!

Answer 1

CSS

.icon {
    padding-left: 22px;
    line-height: 16px;
}

.icon.dashboard{
    background-image: url("/img/icons/dashboard_off.png"); 
    background-repeat: no-repeat;
}
.icon.dashboard:hover, 
.icon.dashboard:active,
.icon.dashboard.active{
    background-image: url("/img/icons/dashboard_on.png")
}

HTML

<a class="icon dashboard" href="index.html">Dashboard</a>

This is how you would do a good inheritance CSS styling.

If you add the class active to the anchor, it will stay on the forced “on” state until you remove the class.

Here is a demo