css - 选择/选项中的错误光标,IE

标签 css internet-explorer html-select mouse-cursor

当文本位于选项下方时,我遇到选项中错误光标的问题。

通常,该选项使用“默认”光标,但是当例如。该段落在选项下,在 IE 中我看到“文本”光标。

代码:

<form>
    <select>
        <option value=a selected="selected">First
        <option value=b>Second
        <option value=c>Third
        <option value=c>Fourth    
    </select>
    <p>text</p>
</form>

它在 IE11 中,我认为旧版本也一样。

我尝试设置 position: relative 和 z-index 来选择,选项和段落,设置 cursor 和 important 来选择,选项,但没有解决方案,情况是一样的。

有什么想法吗?

最佳答案

IE 不遵守选择对象的 z-index,并应用任何底层对象的 cursor 属性。

我通过将所有底层对象的光标属性更改为指向选择对象的 onfocus 事件的指针来处理此问题,并在选择对象的 onblur 事件中恢复它们。

令人失望的是,IE 无法像大多数其他浏览器一样正确处理此问题。

示例代码(根据 DavidG 的要求):

在这个例子中,我们将“underselect”类应用于将被选择下拉列表覆盖的所有元素(注意,下拉列表并不总是向下扩展,它可以向上扩展)。

在页面加载时,每个具有“underselect”类的元素的初始光标属性保存在该元素的“ic”属性中。

选择元素的焦点事件绑定(bind)到一个函数,该函数将所有具有“underselect”类的元素的光标设置为指针。

select 元素的模糊事件绑定(bind)到一个函数,该函数将具有“underselect”类的所有元素的光标设置为页面加载时存储的初始值。

使用jquery

$(function ()
{
  $("#select")
    .bind("focus", function(){ $(".underselect").each(function(){$(this).css("cursor", "pointer") });  })
    .bind("blur", function(){ $(".underselect").each(function (i){$(this).css("cursor", $(this).data("ic")); }) });

  $(".underselect").each(function () { $(this).data("ic", $(this).css("cursor")); });
});

我们仅使用 javascript 创建以下函数:

function saveinitialcursor()
{
  gp = document.getElementsByClassName("underselect");
  for (var i = 0, l = gp.length; i < l; i++)
  {
    style = getComputedStyle(gp[i]);
    cursor = style.getPropertyValue("cursor");
    gp[i].setAttribute("ic", cursor);
  }
}

function selectfocus()
{
  gp = document.getElementsByClassName("underselect")
  for (var i = 0, l = gp.length; i < l; i++)
    gp[i].style.cursor = "pointer";
}

function selectblur()
{
  gp = document.getElementsByClassName("underselect")
  for (var i = 0, l = gp.length; i < l; i++)
    gp[i].style.cursor = gp[i].getAttribute("ic");
}

并将它们绑定(bind)到正文并选择开始标签:

<body onload="saveinitialcursor()" >

<select id="select" onblur="selectblur()" onfocus="selectfocus()" >

关于css - 选择/选项中的错误光标,IE,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23648834/

相关文章:

html - Internet Explorer 中的导航菜单和功能区损坏

javascript - jQuery - 添加第二个变量来选择选项字段

javascript - 如何迭代多个选择并根据数据库中的值设置选项?

ruby-on-rails - rails : Specifying the sort order in the select form helper

html - 为什么@font-face 不工作

html - 设置为背景的 SVG 线性渐变在 Edge 和 IE 中不起作用

css - Nuxt.js 布局的作用域 css

Jquery Ajax 调用导致 Internet Explorer 崩溃?

html - CSS 不适用于 XHTML

javascript - 长时间的 JavaScript 计算期间的 css 进度条