当文本位于选项下方时,我遇到选项中错误光标的问题。
通常,该选项使用“默认”光标,但是当例如。该段落在选项下,在 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/