单击div而不丢失光标css答案

【问题标题】：click through div without losing cursor css单击div而不丢失光标css
【发布时间】：2017-05-03 04:29:55
【问题描述】：

“如何使用 CSS 点击 div”有很多重复，但我的情况似乎有点不同。

我正在使用 -webkit-appearance 和 -moz-appearance 使 div 看起来像一个文本区域，但这在某些浏览器中并不完美......右下角不显示 nwse 光标在某些浏览器中确实如此。我想用光标覆盖一个 div：nwse-resize，但我也希望能够单击这个 div，以便可以实际扩展人造文本区域。指针事件：没有人做它应该做的事情......但是，我失去了我的 nwse 光标......这是整个问题的重点。

html（GWT UiBinder）：

<div class="faux-text-area">
   <div class="expando-div"/>
</div>

css：

.faux-text-area {
   position: relative;
   -moz-appearance: textfield-multiline;
   -webkit-appearance: textarea;
}

.expando-div { 
   position: absolute; 
   bottom: 0;
   right: 0; 
   height: 10px;
   width: 10px;
   cursor: nwse-resize;
}

添加指针事件：没有一个可以理解地删除我的光标 CSS 定义。

还有Add CSS cursor property when using "pointer-events: none"，但这个问题的公认解决方案是将光标CSS简单地放在父元素上，但在我的情况下......父元素是整个人造文本区域，我只想要一部分它有一个调整大小的光标。这个解决方案对我不起作用。

是否有任何简单而优雅的 CSS 解决方案来使这个 div 点击没有指针事件：无？考虑到 webkit-appearance 和 moz-appearance 的局限性，我觉得我被一个非 CSS 的答案困住了，但我想在做更重的工作之前我会先询问社区。

【问题讨论】：

标签： css

【解决方案1】：

替代方法（不完全是 CSS……但需要一点 JQueryUI）：

我已删除：

-moz-appearance: textfield-multiline; 
-webkit-appearance: textarea;

我已经添加了：

resize: vertical;

这使得普通 div 显示为文本区域（至少在 Firefox 和 Chrome 中）...在 IE 中修复（回想一下我正在 GWT 中开发）：

private native void makeResizableInIE() /*-{
      $wnd.$("my_divs_id").resizable();
  }-*/;

对于这需要 IE hack 仍然不是很兴奋。但是对于以前的 CSS 属性，没有像 resize 属性那样模棱两可的 hack。

【讨论】：