I have an ExtJS Grid, which has 5 columns.

In one of the columns, I am displaying an image using a div element dynamically from a renderer when clicking on some other button. I want to display a hand cursor when hovering over the image displayed by my renderer.

I tried adding inline style and onmouseover handler to display hand cursor. Hand cursor is ing when the very first time I load the grid and the onmouseover handler is also getting called. But when I load another set of data in the same grid, the hand cursor is not ing and the onmouseover handler is also not gettng called?

Could you help me get a hand cursor when hovering over the image which is rendered in a div tag in the grid cell.

I have an ExtJS Grid, which has 5 columns.

In one of the columns, I am displaying an image using a div element dynamically from a renderer when clicking on some other button. I want to display a hand cursor when hovering over the image displayed by my renderer.

I tried adding inline style and onmouseover handler to display hand cursor. Hand cursor is ing when the very first time I load the grid and the onmouseover handler is also getting called. But when I load another set of data in the same grid, the hand cursor is not ing and the onmouseover handler is also not gettng called?

Could you help me get a hand cursor when hovering over the image which is rendered in a div tag in the grid cell.

• javascript
• css
• extjs

2 Answers 2

Give your element a class like <div class="myclass"> or <td class="myclass">. Also in your CSS, add;

.myclass{
cursor: pointer;
}

Finally, if you want hand over all images, simply add the following line into your style;

img{
cursor: pointer;
}

You can do that by applying CSS like

.imgStyleHand {cursor:pointer}

or by style like

<img style="cursor:pointer" src="" alt="" />