Toggle element class configuration

Question

I have an issue on how to configure a toggle class.

Here the issue, i cant configure the toogle class. Everythings works fine untill div is collapsed but then when the div is collapsed and if you keep the mouse over the div (.accordionhover-group) i get the mistake. The text is not white but it keeps being red bold ( in this way i can not see the text) and the icon arrow is not up white as it should be. How can i make my text white bold and the icon arrow up white when i hover on the div (.accordionhover-group) after it's collapsed ?

Answer 1

To make your text bold and white here is the css

.accordionhover-group:hover{
    color: #fff;
    font-weight: bold;        
}

And the arrow on hover, here is the css that i suggest you to use to achieve the desired effect.

.clicked .accordionhover-group i: hover  {
    background-position: -311px -99px;
    background-image:url("http://tommywebdesigner.com/img/glyphicons-halflings-white.png");
    float: right;
}

.clicked .accordionhover-group:hover i {
    background-position: -288px -93px;
    background-image:url("http://tommywebdesigner.com/img/glyphicons-halflings-white.png");
    float:right;
}

.icon-arrow-down-white {
    background-position: -311px -99px;
    float :right;
    margin-top: 5px;
    background-image: url("http://tommywebdesigner.com/img/glyphicons-halflings-white.png");
}

.icon-arrow-up-white {
    background-position: -288px -93px;
    float :right;
    margin-top: 5px;
    background-image: url("http://tommywebdesigner.com/img/glyphicons-halflings-white.png");
}

Also there is no need to use important after a style. Here is a good article on the use of important in css http://css-tricks.com/when-using-important-is-the-right-choice/