Javascript 在单击元素之前，“悬停”仅工作一次

我需要你的帮助

悬停似乎只会工作一次，场景如下，用户将悬停在元素上，然后单击它进行选择。选择后，将更改边框颜色并选择新值。如果用户从同一个框中选择另一个值，“蓝色”悬停不再出现，为什么

以下是问题的前后图片：

HTML:

JavaScript:

jQuery的setter修改元素的样式属性。由于内联样式具有更高的特殊性，该属性将覆盖以前的CSS定义。你也许可以使用！很重要，但我建议不要这样做

添加到元素的内联样式，例如style=font-weight:bold总是覆盖CSS中的任何样式，因此可以认为具有最高的特殊性

使用！重要的是错误的做法，应该避免，因为它会破坏样式表中的自然级联，从而使调试更加困难

我成功地删除了边框样式属性：

$(".select dd ul, .select dt a").css('border-color', '');

工作示例如下：

$document.readyfunction{ $。选择dt a。单击功能E{ e、 停止传播； var select=$this.closest'.select'； 选择。查找“ul”。切换； 选择.finddt a，dd ul.css'border-color'，'red' }; $。选择dd ul li a。单击功能E{ var text=$this.html； var select=$this.closest'.select'； 如果e.ctrlKey{ $this.addClass'selected'； select.find'dtspan'.html+select.find'a.selected'.length+； }否则{ var text=$this.html； select.finddd a.removeClass'selected'； $this.addClass'selected'； 选择.finddt span.htmltext； 选择.finddt a.cssbackground-color； 选择.finddd ul.hide； } }; $document.bind'click'，函数{ $。选择dd ul.hide； $。选择dd ul。选择dt a.css“边框颜色”； }; }; * { 字体系列：SegoeUI； 字号：9pt； } .选择dd， .选择dt， .选择ul{ 边际：0px； 填充：0px； } .选择dd{ 位置：相对位置； } .选择一个， .选择一个：已访问{ 颜色：000； 文字装饰：无； 大纲：无； } .选择dt a：悬停， 。选择dd ul：悬停{ 边框颜色：蓝色； } .选择dd ul li a：悬停{ 背景色：rgb112、146、190； 颜色：FFF； } .选择dt a{ 背景：urlarrow.png无重复滚动右中； 显示：块； 右边填充：20px； 边框：1px实心rgb170、170、170； 宽度：180px； } .选择一个跨度{ 光标：指针； 显示：块； 填充：4px； 高度：15px； } .选择dd ul{ 背景：fff无重复滚动0； 边框底部：1px实心rgb170、170、170； 左边框：1px实心rgb170、170、170； 右边框：1px实心rgb170、170、170； 边界顶部：0； 显示：无； 左：0px； 填充：5px0px； 位置：绝对位置； 顶部：-1px； 宽度：自动； 最小宽度：200px； 列表样式：无； } .选择dd ul li a{ 左侧填充：10px； 垫面：3件； 垫底：3件； 显示：块； } .选定{ 背景：RGB195195195195； } .标题列表{ 左：3倍； 字体大小：粗体； 字体：斜体； } 水果 地位

---

它不起作用的原因是，当您选择一个项目时，其中的样式将优先于.select dt a并覆盖dt:hover。所以你需要连接！边框颜色的重要属性

替换

.select dt a:hover, .select dd ul:hover,  {
    border-color: blue;
}

与

---

工作示例：

为什么要使用所有这些代码而不使用select

<select name="carlist" form="carform">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

---

悬停应该可以很好地使用

为什么使用jQuery来悬停，而使用CSS更好？

$(".select dd ul, .select dt a").css('border-color', '');

.select dt a:hover, .select dd ul:hover,  {
    border-color: blue;
}

.select dt a:hover, .select dd ul:hover, dt:hover {
    border-color: blue !important;
}

<select name="carlist" form="carform">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>