Change the mouse pointer on ngclick

Question

I've a div with the Angular ng-click directive attached to it. On hovering over this element the mouse pointer doesn't change. Is there a way to change it through CSS? I know I can simply attach an anchor tag to it, but I would like to know if this can be done.

score 185 · Accepted Answer · answered Sep 19 '13 at 14:06

185

Is there a way to change it through css?

Yes, see cursor.

If you just wanted to target elements with the ng-click attribute, for example:

[ng-click],
[data-ng-click],
[x-ng-click] {
    cursor: pointer;
}

answered Sep 19 '13 at 14:06

André Dion

21,269
7
56
60

Is there a way to add an exception to this? F.I. All ng-clicks should have pointer as cursor except the ones that have X class(or any other CSS attribute) – Murilo May 26 '16 at 00:15
1

@Murilo, yes. For example, `.x[ng-click] { cursor: default; }` – André Dion May 26 '16 at 11:23
12

Does anyone know how to accomplish this in Angular 2? Angular 1 used `ng-click` whereas Angular 2 uses `(click)`. – cbrawl Jan 23 '17 at 22:26
For angular 2 have a look at https://stackoverflow.com/questions/58716247/how-to-apply-cursor-pointer-property-to-click-event-handler This solution uses a directive to achieve this, so it is not a pure CSS solution. – Tom May 27 '22 at 11:55

score 23 · Answer 2 · answered Sep 19 '13 at 14:07

23

All you have to do is use the cursor property

<div data-ng-click="myFun()" class="pointer"></div>

.pointer {
    cursor: pointer;
}

answered Sep 19 '13 at 14:07

Beterraba

6,515
1
26
33

score 6 · Answer 3 · answered Sep 19 '13 at 14:07

6

Can be done via css, just add:

.yourClass { cursor: pointer; }

To your stylesheet

answered Sep 19 '13 at 14:07

Eugenio Cuevas

10,858
3
29
51

score 1 · Answer 4 · edited Apr 14 '16 at 14:57

1

If you are using datatables, you have to override the default datatables.css settings and add the following code to custom CSS, In the code below row-select is the class that I added on datatables in my HTML page.

table.row-select.dataTable tbody td
{
cursor: pointer;    
}

edited Apr 14 '16 at 14:57

Mogsdad

44,709
21
151
275

answered Apr 14 '16 at 14:54

Renu

41
2

score -2 · Answer 5 · answered Sep 19 '13 at 14:09

-2

Yes you can achieve it simply through CSS, nothing special about AngularJS here.

<div ng-click="myAngularFunctionWithinController()" style="cursor: hand;cursor: pointer;">
</div>

answered Sep 19 '13 at 14:09

bdavidxyz

2,492
1
20
40

Why are you setting `cursor` twice? – André Dion Sep 19 '13 at 14:10
Because it will cover all cases, all browsers http://stackoverflow.com/questions/3087975/how-can-i-make-the-cursor-a-hand-when-a-user-hovers-over-a-list-item – bdavidxyz Sep 19 '13 at 14:25
6

`cursor:pointer` will immediately override `cursor:hand` and there aren't any browsers in the wild today that don't correctly support this property (did you actually read the thread you linked to?). Also, applying the style inline isn't going to suit OP's use-case unless he adds that to every element that has an `ng-click` attribute, which really defeats the purpose of using CSS at all. – André Dion Sep 19 '13 at 14:28

Change the mouse pointer on ngclick

5 Answers5

Linked