如何设置完整的 div 可点击？答案

【问题标题】：How to set full div clickable?如何设置完整的 div 可点击？
【发布时间】：2013-06-20 08:19:08
【问题描述】：

我有这个 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>

当光标在 div 上移动时，它会显示 text-cursor 。我希望那个 div 是可点击的，并且点击光标应该出现在那里。怎么能做到这一点。请帮忙？？

【问题讨论】：

旁注：虽然id 值在 HTML5 中有效，但在 HTML4 及更早版本和 CSS 中无效。由于 CSS 对 id 值的规则是最严格的，我建议坚持使用它们。

标签： javascript css html clickable

【解决方案1】：

将 cursor: pointer 添加到 CSS 中 class_div 类的样式规则中。

【讨论】：

当您将鼠标从第一个文本移动到下一个文本时，您没有看到间隙吗？

【解决方案2】：

要使其完全可点击，您需要在 div 中分别添加 cursor:pointer; display:inline-table; text-align:center; 属性。

没有display:inline-table，整个div将无法点击，并会在两行文本之间产生间隙。

这里是WORKING SOLUTION

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>

CSS：

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

希望有所帮助。

PS：我已经用 div 作为选择器进行了说明，但是您也可以将样式应用于类。

【讨论】：

我相信只需将 cursor:pointer 应用于 div 就足够了吗？这里的 display:inline-table 功能是什么？
带光标：指针；鼠标效果是可见的，但是当你从上到下将鼠标从第一个标题移动到下一个标题时，你会看到两者之间的差距并没有得到鼠标效果。所以这就是为什么 display:inline-table;来使它完全可点击。你几乎可以在这里看到这个jsfiddle.net/g6J3E/1。 OP 提到要使其完全可点击 - @QiqiAbaziz
我明白了.. 从来没有用过那个。旧版浏览器是否支持这种样式？
您可以在此处查看浏览器对此的支持。 browsersupport.net/CSS/display%3Ainline-table - @QiqiAbaziz

【解决方案3】：

你需要像这样改变风格 -

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

【讨论】：

当您将鼠标从第一个文本移动到下一个文本时，您没有看到间隙吗？