在<select> OR <option>标签</option> </select>上使用CSS3 Popover

时间:2013-05-28 19:46:47

标签: jquery css css3

我可以在<select><option>标签上使用CSS3弹屏吗?实际上,我已经在<select>标签上尝试了它并且它有效。但是对于<option>它没有。我正在关注here的一个例子。查看我提到的JSFiddle来自上述链接。当用户将鼠标悬停在其中一个选项上时,我感兴趣的是使用popover显示图像。我是否需要引入jQuery来解决这个问题?

谢谢。

1 个答案:

答案 0 :(得分:3)

我假设您要问的是,如果您可以使用某个选择器定位select的下拉位并将样式应用于您所链接的问题中的弹出窗口。

答案是 sorta

select HTML5元素是Shadow DOM widget的一个示例。

简而言之,您所看到的下拉列表既不是select也不是option元素。它是一个隐藏元素,只能使用Shadow DOM API进行定位。

截至目前,shadow DOM spec只有working draft most browsers haven't implementedChrome is the only browser截至2013年5月)提供任何大量的Shadow DOM支持。

正因为如此,跨浏览器的纯CSS回答你的问题涉及'hacks',各种各样,like the answers to this StackOverflow question

如果您反对这样的事情 - 也许是semantic reasons - 那么您应该考虑使用Javascript解决方案。这个Javascript解决方案可能涉及制作自己的HTML小部件,其行为类似于select,但由常规DOM元素组成,您可以控制其样式。您可能想要尝试使用许多功能丰富的Javascript选择。 As an example, check out Chosen, one of my personal favorites.

如果您想为将来做好准备,建议您查看HTML5 Rocks上的Shadow DOM tutorials。他们读得很好。