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

Question

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

谢谢。

Answer 1

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

答案是 sorta 。

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

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

截至目前，shadow DOM spec只有working draft most browsers haven't implemented。 Chrome 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。他们读得很好。