CODEWITHSUNDEEP
htmlcsshover
Shubham Rajdhar
Shubham Rajdhar

Reputation: 83

CSS active division background color change

I am still learning, so please bear with me.

Please check this page first : My site

Scroll a bit and check the sidebar with name NAVIGATE.
As you can see, I have manually added few sub-menus there and I have added background color change on hover over each division.
Now I want to make it like when I am on the History of CSE page, the NAVIGATE column's sub-option should show the active division or active link.

Means that I want the :active property there. The active page's division will show a different background color, say green.

I tried to search a lot, but didn't get the idea.

Thank you very much!

PS : What I tried to do is this, I am a total newbie, so not sure what to do :

div.sbproduct:hover{
    background-color: #F5AC2B;
}

div.sbproduct a:active{
    background-color:#ffffff;
}

.sbproduct:hover a{
    color: #ffffff !important;
}

Upvotes: 0

Views: 1522

Answers (2)

Sindhu
Sindhu

Reputation: 473

I think this may helps you .....use a toggle() to change the active division background color

Working Fiddle

// It changes the active  division background color
$( ".sbproduct" ).toggle(
function() {
 $( this ).addClass( "change" );
 },
 function() {
  $( this ).removeClass( "change" );
 }
);

Upvotes: 1

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

Use this Jquery

$(document).ready(function(){

        $("a").click(function(){
        //alert('hi');
          $("a").removeClass()
            $(this).addClass("over")


        }) ;        

    });

Check this Demo http://jsfiddle.net/dineshk/X4GSR/6/

Upvotes: 0

Related Questions