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

Question

我试图隐藏一个正常工作的选择列表框，但我仍然喜欢悬停效果来处理可见元素，但它不是。这是一个简单的小提琴：

http://jsfiddle.net/Kr6E9/

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

我能做些什么吗？

亚马逊在其主页上使用主搜索框（默认为全部）执行同样的操作。我看了，他们有一个隐藏的列表框，他们的悬停工作，但他们必须做一些我不做的事情。它似乎不是一个z索引问题，据我所知，没有办法以编程方式激活列表框选项。

想法？谢谢你的帮助！

（哦，我的定位对于这个例子非常糟糕，我会更好地放置列表框，但我认为这是展示问题的最简单方法。）

要安抚解析器，这里是列表节点的一些示例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元素。