CODEWITHSUNDEEP
htmlclass
user3549329
user3549329

Reputation: 1

Toggle between two styles on focus

I have two pre-defined classes (class-normal and class-on-select). A few li elements are making use of class-normal. How do I make them use class-on-select only on focus/hover?

Upvotes: 0

Views: 28

Answers (3)

K K
K K

Reputation: 18099

You can use :hover, :focus on same class to achieve these effects:

HTML:

<ul>
    <li>Random li</li>
</ul>

CSS:

ul li {
    color:black;
    background:#BFBFBF;
    border:1px solid #000;
    /*css for class-normal*/
}
ul li:hover {
    color:#fff;
    background:#000;
    border:1px solid #000;
    /*css for class-on-select*/
}

Demo: http://jsfiddle.net/GCu2D/600/

Upvotes: 1

Ganesh Salunkhe
Ganesh Salunkhe

Reputation: 598

You can try something like this:

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}
<p><b><a href="https://www.google.com" target="_blank">Google</a></b></p>
    <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
    <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

JSFiddle Demo

Upvotes: 0

Nin-ya
Nin-ya

Reputation: 252

class-normal:hover , class-normal:focus{ 
   //your styling here
}

will do the trick.

Upvotes: 0

Related Questions