gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 11:28:06 25 4
gpt4 key购买 nike

我正在为使用背景图像作为向下箭头按钮的表单创建自定义选择菜单。我用这个 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 仅在菜单打开时处于第二种状态?谢谢!

最佳答案

对于掌声和咯咯笑声,我试了一下,想出了一个不雅的解决方案-FIDDLE .

在此代码中,您确定哪些 ul 元素将提供下拉菜单,并使用该元素定义来触发鼠标悬停/鼠标移出序列。

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 - 打开时更改 HTML 选择菜单的背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21271390/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com