Question

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>
Was it helpful?

Solution

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/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top