当鼠标悬停在选项上时改变颜色
问题描述:
我用javascript做了一个选择,并用数组填充它的选项。之后我写了一些jquery,当我将鼠标悬停在选项上时,尝试更改选项的backgroundColor,但似乎没有任何效果。每次我将鼠标悬停在选项上时,它们仍以蓝色突出显示。当鼠标悬停在选项上时改变颜色
我是新来的JavaScript和jquery,这是一个想法,为什么发生这种情况:这可能是因为有一个标准的悬停功能,总是会覆盖我的选择或我真的忽略了一个错误?因为我之前测试过的div我的代码和代码工作就像一个魅力在这里
我的代码:
//arraycommObjName is an array with 4 elements to fill my selection
//$('#commObjs') is my select
for (i=0; i < arraycommObjName.length; i++) {
$('#commObjs').append($('<option class="testoptions"></option>').attr("value", arrayCommObjID[i]).text(arraycommObjName[i]));
}
$(".testoptions").hover(function(e) {
$(this).css("background-color",e.type === "mouseenter"?"green":"red")
})
注意一下是的,我知道这是更好的CSS这样做,但它要求我做它只有JavaScript和jQuery。
答
您可以使用select2并添加一些CSS来覆盖默认样式。
下面是一个可怕的颜色示例,以证明您可以覆盖默认的select2白色和蓝色。
$("#states").select2();
#states {
width: 300px;
}
.select2-results__option {
color: orange;
background-color: seashell;
}
.select2-results__option--highlighted {
color: white !important;
background-color: darkgreen !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: darkgray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id="states">
<option value="">Select...</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</select>
+0
是的我目前正在尝试这样做,但在我的情况并不那么容易。你看到我正在为eclipse中的设计工作室制作一个自定义组件,并且这没有html只有一个component.js来写掉javascript和jquery,你知道一种将脚本包含在js文件中的方法吗?因为目前我总是收到'错误:脚本错误:'消息 – mrdeadsven
还请提供你的HTML – CCH
你不能轻易改变'select'或'option'元素的造型。如果你需要这个,我会建议使用一个库,它将'select'转换为其他HTML元素,你可以完全控制CSS。 –
尝试类似choosen或select2插件这些将选择转换为UL LI然后只有你可能能够在元素上应用css –