javascript - 文本区域选项不可选择

Question

我在右侧创建了一个多选文本区域：

http://tinyurl.com/d2dbay5

通常我无法做出任何选择，除非我点击背景并上下滚动。即使那样，如果我尝试选择另一个字段，我也会遇到同样的问题。

此外，当您将鼠标悬停在图表周围的文本上时，左侧的文本框会被填充。当其中一个文本框的文本多于房间形式时，我会得到一个垂直滚动条，这就是我想要的。但是，如果我将鼠标悬停在数据较少的文本字段上并返回，我将不再获得滚动条。

Answer 1

您无法选择 textareas 的任何内容的原因是<div>创建 svg 的元素是通过position: absolute;它定位的，当结合<div>结果的大小时，它会呈现在页面其余部分的顶部。

在大多数现代浏览器中，您可以通过z-index为相关元素的 css 添加值来解决此问题。您希望所有包含可选文本的元素都具有比 svg 元素<div>更高的值。z-index

具体来说，将其放入您当前的结构中，您可以将以下内容添加到包含 svg 的 div 的内联样式中：

z-index: 1;

然后将以下内容添加到影响其他 div 的每个 css 规范（例如#legend、#legend_title、#right_section 等）：

z-index: 2;