CODEWITHSUNDEEP
htmlcss
James
James

Reputation: 1945

zoom in cursor not working

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

Upvotes: 1

Views: 2863

Answers (3)

DoXicK
DoXicK

Reputation: 4812

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)

Upvotes: 4

Jan-Willem de Boer
Jan-Willem de Boer

Reputation: 797

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>

Upvotes: 2

Raphael M&#252;ller
Raphael M&#252;ller

Reputation: 2200

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

test it on:

w3schools

it also doesn't work...

Upvotes: 3

Related Questions