Add class on hover on Angular JS

Question

I'm trying to add a class when hovering the li element in the code below with Angular

<li ng-mouseenter="cola-selected=true" class="pull-left" ng-class="{'selected' : cola-selected}">
    <a href="interna.html">
        <img src="assets/images/cola.png">
    </a>
</li>

This is all the functionality the page will have, so I though maybe it is not necessarily to add a new js file for the js.

When the mouse enter to the li it should have the new class selected. The code above it is not working, and I cannot figure out why.

Here is an example of my code on a fiddle: https://jsfiddle.net/mjrmeffc/

This tutorial should help you scotch.io/tutorials/the-many-ways-to-use-ngclass If not, then I will write an answer shortly. — Dr G.
– Dr G., Commented Dec 26, 2015 at 15:33

Tjoeaon · Accepted Answer · 2015-12-26 15:21:19Z

Why do you need an extra file if you can write the logic in your angular application?

I assume you make use of ng-app and have a so called javascript file where your logic is, and you should include it in here.

Here is an example of the proper way of adding/removing a class.

<div ng-app>
  <div 
    class="italic" 
    ng-class="{red: hover}" 
    ng-mouseenter="hover = true"
    ng-mouseleave="hover = false">
      Test 1 2 3.
  </div>
</div>

NB I found this in another stackoverflow question, please make proper use of google search first, I don't have enough reputation to flag your question, or to make a comment.

* EDIT *

It seems like you're not yet familiar with AngularJS. You need to include your 'app.js' or 'script.js' whatever you want to call it. In there you define your application using

var app = angular.module('yourappname', [/* add your dependencies here*/]);

//Other logic like controllers or services

And your HTML should be

<div ng-app="yourappname">
 <div ng-controller="yourController">

PLEASE ORIENTATE YOURSELF FIRST BEFORE YOU START ASKING QUESTIONS

I just copy your code, it seems to be the same as mine, however, I have the same issue, the red class is not added.
Can you please provide a codepen/jsfiddle or include your javascript file here?
Why is there no Javascript? You need your angular application to use angular.
I have nothing else in angular, I just need to add this class

Basheer Kharoti · Accepted Answer · 2015-12-26 15:58:50Z

2

Try using ng-mouseover attr

<li ng-mouseover="hoverIn()" class="pull-left" ng-class="{{applyClass}}">

write a function hoverIn() in your script and assign value when hover over

$scope.hoverIn = function() {
    this.applyClass = "red";
}

Working Demo

edited Dec 26, 2015 at 15:58

answered Dec 26, 2015 at 15:38

Basheer Kharoti

4,3025 gold badges27 silver badges51 bronze badges

Collectives™ on Stack Overflow

Add class on hover on Angular JS

2 Answers 2

6 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Linked

Related