是否可以在悬停时更改选择列表选项的默认背景颜色?
HTML:
<select id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
我试过option:hover { background-color: red; }
,但没用。有人知道怎么做这个吗?
这可以通过实现插入框阴影来完成。例如:
select.decorated option:hover {
box-shadow: 0 0 10px 100px #1882A8 inset;
}
这里,.decorated
是分配给选择框的类。
希望你明白这一点。
选择/选项元素由操作系统呈现,而不是HTML。您无法更改这些元素的样式。
实现嵌入框阴影CSS适用于Firefox:
select option:checked,
select option:hover {
box-shadow: 0 0 10px 100px #000 inset;
}
选中的选项在Chrome中有效:
select:focus > option:checked {
background: #000 !important;
}
问题是即使JavaScript也没有看到option
元素被徘徊。这只是为了强调如何通过仅使用CSS来解决它(至少很快就会解决):
window.onmouseover = function(e)
{
console.log(e.target.nodeName);
}
解决此问题的唯一方法(除了等待数千年的浏览器供应商修复错误,更不用说困扰你正在尝试做的事情了)就是用JavaScript替换下拉菜单和你自己的HTML / XML。这可能涉及使用select
元素替换ul
元素以及每radio
元素使用input
li
元素。
我意识到这是一个较老的问题,但我最近遇到了这个需求,并提出了使用jQuery和CSS的以下解决方案:
jQuery('select[name*="lstDestinations"] option').hover(
function() {
jQuery(this).addClass('highlight');
}, function() {
jQuery(this).removeClass('highlight');
}
);
和css:
.highlight {
background-color:#333;
cursor:pointer;
}
也许这有助于其他人。
这就是你需要的,儿童组合子:
select>option:hover
{
color: #1B517E;
cursor: pointer;
}
尝试一下,效果很好。