CODEWITHSUNDEEP
cssangularjspseudo-classng-class
Steve
Steve

Reputation: 237

AngularJS ng-class not working with :hover pseudoclass

Hover psuedoclass doesn't seem to work with ng-class ... any ideas? Here's a sample:

http://jsfiddle.net/75n6w/11/

<style>
    .orange {color:orange}
    .pointer-hover:hover {
        cursor: hand; cursor: pointer;
    }
</style>
<table ng-app>
    <thead>
        <th></th>
        <th>Orange<br />class</th>
        <th>Rollover<br />psuedoclass</th>
    </thead>
    <tr>
        <td>With class tag</td>
        <td class="orange">Orange</td> 
        <td class="pointer-hover">Hover pointer</td>
    </tr><tr>
        <td>With ng-class tag</td>  
        <td ng-class="{orange: 1==true}">Orange</td>  
        <td ng-class="{pointer-hover: 1==true}">Hover pointer</td>
    </tr>
</table>

Upvotes: 3

Views: 2709

Answers (1)

Ivan Chernykh
Ivan Chernykh

Reputation: 42166

Take a look at console, you have an error. Just wrap your class name with apostrophes:

"{'pointer-hover': 1==true}"

Updated fiddle: http://jsfiddle.net/75n6w/12/

Upvotes: 2

Related Questions