Question

我正在为表单创建自定义选择菜单，该表单使用背景图像作为向下箭头按钮。我用这个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仍然处于聚焦状态，并且只有当用户关注另一个元素时才返回到第一个状态。这有什么办法吗？即菜单打开时CSS仅处于第二状态？谢谢！

Answer 1

对于拍打和咯咯笑，我拍了一张照片并提出了一个不太优雅的解决方案 - FIDDLE。

在此代码中，您可以确定哪些ul元素将提供下拉列表，并使用该元素定义来触发mouseover / mouseout序列。

JS $

( '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');
});

同样，更多的是蛮力的方法，但也许它会给别人一些想法，使其更好。

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

1 个答案: