angular: updating scope on hover

angularjs, css

Solution

You're on the right track. You can actually use the ngMouseenter and ngMouseleave directives to do this.

<span ng-mouseenter="show = true" ng-mouseleave="show = false">
  Mouse over me.
</span>

<div ng-show="show">Hello!</div>

Here's a working Plunker: http://plnkr.co/edit/Ro80nR7HT7OGGPCXjz7E?p=preview

@Swordfish0321 is also right - you can write a very simple directive to listen specifically for the hovering if you'd like, but it may not be necessary. We use `mouseenter` and `mouseleave` for tooltips in UI Bootstrap, for example.

Problem

I'd like some child div of a main div be hidden by default an visible when you hover over the main div. I'm trying to have that native in angular and forget the `.hover()` way in jquery. I though about using `ng-show` on the child div and then updating the binding when I hover the main div. Is there a directive to listen for hovering?

Original source