Search code examples
javascriptcsshtmlclickable

How to set full div clickable?

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??

Solution

  • 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.