有没有办法阻止 pointer/cursor 使用 CSS 与 select 元素后面的元素交互？

Question

有没有办法阻止 pointer/cursor 与使用 CSS 的 select 元素后面的元素交互？这似乎只发生在 IE11 中。

这是显示我的问题的 jsFiddle：http://jsfiddle.net/6mzhgmvj/。

附带代码如下：

<!DOCTYPE html>
<html>
<body>

<select autofocus>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

<p><strong>Note:</strong> The autofocus attribute of the select tag is not supported in Internet Explorer 9 and earlier versions, or in Firefox.</p>

</body>
</html>

重现步骤：

展开下拉菜单。
将鼠标悬停在选项上。
当鼠标悬停在选项 3 和 4 上时，光标在 'default' 和 'text' 之间快速变化，因为展开时它后面有一个段落元素。

任何帮助都将非常有用。

Answer 1

这绝对是 IE 问题。虽然有很多解决方案可以使自动对焦在 IE 中工作（在 Whosebug 本身中），但是 none 其中的主要问题是 select 下拉菜单位于段落标记之上。[=11] =]

这里有一个可能对你有帮助的 hack:D

p {
    cursor: default;
}

请注意，这只是一个 hack，并没有解决根本问题。我也想知道更好的解决办法

Answer 2

正如我在评论中所说，问题 Bad cursor in select/option, IE 的答案暗示了一个相当复杂的 JS 解决方案。

可以像这样完成一些更简单的事情：

<span><select>
/* options here */
</select></span>

span {
    position:relative;
    z-index:0;
}
span:after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:100px;
    background:rgba(255, 0, 0, .25);
    z-index:-1;
}

我们在 select 元素周围放置了一个 span，然后在设置了 cursor:pointer 的 select ~~下方放置了一个伪元素。这使得光标保持指针，即使较低的选项悬停。~~ 编辑：实际上，我在早期版本中使用 cursor:pointer，但后来我意识到IE 用于 select 选项的光标是不同的，并且设置光标似乎根本没有必要 - 鼠标指针所在的元素没有任何直接文本内容似乎已经足够了.

（当有更多选项时，您可能希望增加伪元素的高度。）

不需要background颜色，我把它放在里面只是为了让伪元素所在的位置清晰可见。去掉背景，还是一样的

一个小缺点：该伪元素必须位于z轴上的以下内容之上，否则该段落将再次“接管”，我们遇到与之前相同的问题。由于可用性可能会受到影响（无法在该伪元素下方开始 selecting 文本，其下方的可聚焦元素将不可点击），这是另一个版本，仅在 select 有焦点：

<span>
  <select>
  /* options here */
  </select>
  <span></span>
</span>

span {
    position:relative;
    z-index:0;
}
span span {
    display:none;
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:100px;
    background:rgba(255, 0, 0, .25);
    z-index:-1;
}
span select:focus + span {
    display:block;
}

http://jsfiddle.net/CBroe/y4k35rqn/1/

这使用相邻兄弟组合器使元素仅在 select 具有焦点时显示 – 这就是为什么我在这里使用额外的 span 元素，否则我将没有“下一个” sibling” 从焦点 select.

定位

（当然，当你绝对需要你的 select 设置 autofocus 属性时，这并不能很好地工作，为什么我在这里删除它。也许这是你愿意的妥协make。或者如果该元素在页面加载时显示也不会造成伤害，因为用户必须先从 select 移除焦点，然后才能与其他元素交互。您的选择。）

有没有办法阻止 pointer/cursor 使用 CSS 与 select 元素后面的元素交互？

Is there a way to prevent the pointer/cursor from interacting with elements behind a select element using CSS?

html

css

select