Question

以下HTML + JavaScript有什么问题？ alert()中的onclick显然从未在工具提示窗口中调用按钮。

我已尝试使用多种浏览器，例如Firefox 33.1。在工具提示的上下文之外（即通过从样本中删除class="tooltip"），它起作用。工具提示仅以here所述的方式依赖于CSS。

<html>
<head>
  <meta http-equiv="x-ua-compatible" content="IE=edge" />
  <style type="text/css">

    .cell {
      position:relative;
    }

    .tooltip {
      position:absolute;
      left:10px;
      top:10px;
      background-color:gray;
      z-index:100;
      width:200px;
    }

    .cell:active .tooltip { visibility:hidden !important; }
    .cell:hover .tooltip  { visibility:visible; }
    .tooltip              { visibility:hidden; }

  </style>
</head>
<body>
  <table>
    <tr>
      <td>
        <div class="cell">
          CELL
          <div class="tooltip">
            <table>
              <tr>
                <td>KEY</td>
                <td>VALUE</td>
              </tr>
            </table>
            <form>
              <button type="button" onclick="alert('TEST');">EDIT</button>
            </form>  
          </div>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

Answer 1

这个例子在IE8浏览器中运行良好。

适用于FF浏览器和Chrome 请评论这种风格

.cell:active .tooltip { visibility:hidden !important; }

Answer 2

单击按钮后，hover类将丢失，按钮将消失。如果您使用mouseover而不是点击它将起作用：

          <button type="button" onMouseOver="alert('TEST');">EDIT</button>

小提琴：http://jsfiddle.net/yt9kvngr/

为什么onclick不会触发工具提示窗口中的HTML按钮？

2 个答案: