zoom in cursor not working

Question

I am trying to add zoom in cursor to table but somehow not working.

<div style="height: 280px;overflow: auto" >
<table class="gridHover  ">

    <tbody  style = "cursor: zoom-in" >
        <tr  >
            <td>FFF</td>
            <td>FFF</td>
            <td>FFF</td>
            <td>FFF</td>
        </tr>
        <tr >
            <td>FFF</td>
            <td>FFF</td>
            <td>FFF</td>
            <td>FFF</td>
        </tr>
        <tr >
            <td>FFF</td>
            <td>FFF</td>
            <td>FFF</td>
            <td>FFF</td>
        </tr>
    </tbody>
</table>

I think its because of that gridHover class. Can someone tell how to use zoom in cursor. I want to make it work on IE, chrome and FF. Here is fiddle

Have you tried adding -webkit-zoom-in and -moz-zoom-in? – Lee Aug 15 '14 at 08:37 — Lee, Aug 15 '14 at 08:37

score 4 · Answer 1 · edited May 23 '17 at 12:05

4

The zoom-in cursor is still browser specific for mozilla and webkit:

cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;

might try the same for IE though, but these are the ones i know of

As can be read at MDN the browser support for IE is lacking.

Mozilla and Webkit are prefixed
Opera works without a prefix

Also, here is an alternative way to try to fix it: image cursor (it's the exact same problem btw)

edited May 23 '17 at 12:05

Community

1
1

answered Aug 15 '14 at 08:37

DoXicK

4,784
24
22

For IE it's [not supported](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) – Vucko Aug 15 '14 at 08:38
@Vucko thanks for the reference :-) i'm adding it to the answer! – DoXicK Aug 15 '14 at 08:43
I have upvoted you but have to accept Templar's answer as he answered first. Sorry if it sounded rude. – James Aug 15 '14 at 12:02
not rude, just not very usefull for people searching for this same question. i don't mind about the 5 points i'm missing out on, can't buy a ferrari from these points anyway ;-) – DoXicK Aug 15 '14 at 12:19

score 2 · Accepted Answer · edited Aug 15 '14 at 08:47

2

Here is the fixed JSFiddle

This is the new code:

<div style="height: 280px;overflow: auto">
<table class="gridHover">

    <tbody style="cursor: -webkit-zoom-in; cursor: -moz-zoom-in;">
        <tr>
            <td>FFF</td>
            <td>FFF</td>
            <td>FFF</td>
            <td>FFF</td>
        </tr>
        <tr >
            <td>FFF</td>
            <td>FFF</td>
            <td>FFF</td>
            <td>FFF</td>
        </tr>
        <tr>
            <td>FFF</td>
            <td>FFF</td>
            <td>FFF</td>
            <td>FFF</td>
        </tr>
    </tbody>
</table>

edited Aug 15 '14 at 08:47

Raphael Müller

2,180
2
15
20

answered Aug 15 '14 at 08:35

Jan-Willem de Boer

797
10
19

@Happy that is because it is not supported by IE. Check my answer – DoXicK Aug 15 '14 at 08:42
3

and i want a Ferrari, but that is also not going to happen anytime soon. – DoXicK Aug 15 '14 at 08:46
@Happy IE doesn't support it. You need to wait till it supports most of css3. – Jan-Willem de Boer Aug 15 '14 at 08:47
1

@DoXicK i dont expect Ferrari from you. There should be some other alternative to it as well which you could have mentioned. Anyway thanks for your answers – James Aug 15 '14 at 10:51
@Happy i just updated my answer with an alternative. It's just not a very good alternative but it's an answer to your problem. – DoXicK Aug 15 '14 at 11:54
@DoXicK i think i had tried this and was not working in IE. Anyway at the moment very few people using IE and hence i will tell them not to use IE. IE is hopeless browser. I suffer lot of performance problem due to it. – James Aug 15 '14 at 12:01

score 2 · Answer 3 · answered Aug 15 '14 at 08:39

2

I'm not sure, but I think its broken in chrome.

test it on:

w3schools

it also doesn't work...

answered Aug 15 '14 at 08:39

Raphael Müller

2,180
2
15
20

fyi: w3school is one of the WORST sites to use as a reference (As you just found out ;-) ) – DoXicK Aug 15 '14 at 08:42
it's about the cursor property, and the example just uses the standard cursor property, without the browser specific ones. – Raphael Müller Aug 15 '14 at 08:44

zoom in cursor not working

3 Answers3