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/

Answer 1

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

Answer 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