隐藏列表框，但仍允许将鼠标悬停在可见元素上

Question

我正在尝试隐藏一个选择列表框，它工作正常，但我仍然希望悬停效果在可见元素上起作用，但事实并非如此。这是一个简单的小提琴：

http://jsfiddle.net/Kr6E9/

顶部框的悬停工作正常，但里面没有列表框。底部框有隐藏（实际上，不透明度设置为 0）列表框，但悬停不起作用，除非列表框不在。

对此我有什么办法吗？

亚马逊在他们的主页上用他们的主搜索框（默认为全部）做同样的事情。我看过，他们有一个隐藏的列表框，他们的悬停工作，但他们一定在做我没有做的事情。这似乎不是 z-index 问题，据我所知，无法以编程方式激活列表框选项。

想法？感谢您的帮助！

（哦，我的位置对于示例来说真的很糟糕，我会更好地放置列表框，但我认为这是显示我的问题的最简单方法）。

为了安抚解析器，这里是列表节点的一些示例 html。请注意，如有必要，这可以更改：

<span class="wrapper">
  <span class="text">Select</span>
  <select class="dropdown">
    <option>123</option>
    <option>234</option>
    <option>345</option>
  </select>
</span>

再次感谢！

Answer 1

删除这个：

.text:hover {
background-color: lightgray;
}

添加这个：

.wrapper:hover > .text{
background-color: lightgray;
}

只要将wrapper 悬停在上面，此样式就会应用于所有text 子元素。