【问题标题】:How can I modify the style when hovering over a combo's option? [duplicate]将鼠标悬停在组合选项上时如何修改样式? [复制]
【发布时间】:2013-12-17 16:39:16
【问题描述】:

这听起来很简单:

将鼠标悬停在 Xpages 组合框的选项上,它们会得到一些蓝色背景和白色文本颜色。试图改变这一点让我发疯。这显然不是

中的简单 css 语句
select option:hover{background-color: green;}

就像一些标准的 html 代码一样(这就是为什么我没有用 css 之类的东西来标记它......)。但那是什么? Firebug 或 Chrome 的开发者工具对我帮助不大,真的,虽然我确定我错过了什么

编辑(问题结束后):
我知道有很多关于类似主题的问题。但他们都没有处理 xsp 组合框。你们中的一些人链接的一个问题通过推荐一个盒子阴影而不是背景颜色给出了一个有趣的解决方案。这很好,但不是我想要的:

  • 打开combo选中的值还是有默认的 背景;只有在悬停时背景才会发生变化
  • 使用这种方法我只能“投射”一个阴影,但不能改变 文本颜色 - 取决于阴影颜色 - 可能是必要的 使选项清晰可见

但我喜欢 Knut 的回答,因为它似乎指向了正确的方向;但是需要进行一些更改;如果问题尚未结束,我可以将我的解决方案作为自己的答案发布;但所以我把它记下来作为对克努特回答的评论

【问题讨论】:

  • 您希望支持哪些网络浏览器?
  • 不是 真的是一个 duplicate 问题,因为它与 XPages 相关:first,你必须知道 @987654323 @ 被呈现为原生 HTML 选择控件(这就是无法更改悬停背景的原因)并且 second 有一个开箱即用的替代方法 xe:djComboBox
  • 回复:@user2191572:它应该支持 MSIE 8--10 和 Chrome;但实际上它应该适用于任何现代浏览器
  • 回复:@Knut:感谢您的输入,我同意:搜索 StackOverflow 我发现了许多问题和答案,但都是处理标准 HTML 选择控件
  • 我很高兴看到你让它工作,我认为有问题的根本问题源于风格特异性的规则。如果您有空闲时间,请随时阅读。 smashingmagazine.com

标签: xpages


【解决方案1】:

您无法为xp:comboBox 更改此样式。但是,如果您使用来自 ExtLib 的 xe:djComboBox,那么您可以通过以下方式更改样式:

.tundra .dijitMenuItemSelected  {
    background-color: green;
}

【讨论】:

  • 感谢您指出正确方向的答案。不过,我必须进行一些更改,因为“dijitMenuItemSelected”仅适用于单击该项目的短暂时刻。对于悬停,我终于发现“dijitMenuItem:hover”可以解决问题;我还尝试了在悬停项目时应用的“dijitMenuItemHover”,但不知何故,这个并没有触发样式的变化。
  • 感谢您添加“dijitMenuItem:hover”,尽管仅使用“dijitMenuItemSelected”(注释 8.5.3)悬停对我有用 - 可能取决于版本或浏览器 - 最好有最终解决方案。跨度>
猜你喜欢
  • 2020-06-30
  • 1970-01-01
  • 2020-10-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-06-30
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多