打开HTML选择菜单时更改其背景图像

我正在为使用背景图像作为向下箭头按钮的表单创建自定义选择菜单。我用这个CSS实现了这个效果：

.calculator_select select {
    background: url(../img/arrow.png) no-repeat right 65px top -3px #95957A;
    overflow: hidden;
    width: 110%;
    padding: 5px;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 25px;
    -webkit-appearance: none;
    color: white;
    padding-left: 25px;
    position: relative;
}

.calculator_select select:focus {
    background: url(../img/arrow-flipped.png) no-repeat right 65px top -1px #95957A;
}

---

这几乎可以完美地工作，除了CSS在选择一个选项后保持聚焦状态，并且只有当用户聚焦于另一个元素时才返回到第一个状态。有办法解决这个问题吗？i、 当菜单打开时，CSS仅处于第二种状态？谢谢

对于耳光和笑声，我试了一下，想出了一个不雅观的解决方案-

在这段代码中，您确定哪个ul元素将给出下拉列表，并使用该元素定义触发mouseover/mouseout序列

JS $

---

同样，这更像是一种暴力手段，但也许它会给其他人一些想法，让它变得更好。

您是否在尝试实现悬停效果？为什么不使用select:hover？

select:active

可能更适合他想要的。基本上，我的目标是实现这样一种效果：当菜单关闭时，css将处于第一种状态（使用background arrow.png），当我单击select菜单并出现下拉菜单时，它将更改为第二种状态（使用background image arrow fliped.png）当我选择一个选项或以其他方式关闭菜单时，它将返回到原始状态。当我使用“选择：激活”时，箭头会翻转大约半秒钟，然后又变回原来的状态。焦点几乎可以工作，除了箭头在用户选择另一个元素之前保持翻转。

( 'nav ul li:nth-child(2)' ).mouseover(function(){
        $('.statusdiv').css('background-color', 'green');
});
$( 'nav ul li:nth-child(2)' ).mouseout(function(){
        $('.statusdiv').css('background-color', 'red');
});