How to set full div clickable?

Question

I have this code for div

      <div align="center" id="1_2" class="class_div" onclick="DoAction(1)" style="float: left;  height: 60px; width: 250px; margin: 10px"><h1>&nbsp;&nbsp;&nbsp;&nbsp;Class :Class-1</h1>&nbsp;&nbsp;&nbsp;&nbsp; Class Teacher :Manan</div>

When cursor moves on the div it shows text-cursor . I want that div to be clickable and the click-cursor should come there.How could this be done.Please help??

Answer 1

To make it fully clickable, you need to add cursor:pointer; display:inline-table; text-align:center; properties respectively to the div.

Without display:inline-table, the whole of the div will not be clickable and will create a gap between two lines of text.

Here is the WORKING SOLUTION

The HTML:

<div align="center" id="1_2" class="class_div" onclick="DoAction(1)" style="float: left;  height: 60px; width: 250px; margin: 10px"><h1>&nbsp;&nbsp;&nbsp;&nbsp;Class :Class-1</h1>&nbsp;&nbsp;&nbsp;&nbsp; Class Teacher :Manan</div>

The CSS:

div{cursor:pointer; display:inline-table; text-align:center;}

Hope the helps.

PS: I have illustrated with div as the selector, but alternatively, you can apply the styles to the class also.

Answer 2

Add cursor: pointer to the style rule for the class_div class in your CSS.

Answer 3

You need to change style like this -

<div style="cursor:pointer" ....></div>.