是否有可能在一个对象/区域上有多个悬停？

Question

所以现在我在一些元素上有了:hover的CSS，并且都很好，但是现在在悬停时需要一些文本/ html内容。

现在是什么：

<div id="first"> 
<a class="hover_thing"></a> 
</div> 

哪里#first只是一些普通的容器和锚有一些background-image财产上.hover_thing:hover设置。

我想要做什么：

<div id="first"> 
<a class="hover_thing"></a> 
<a class="second_hover_thing"></a> 
</div> 

或

<div id="first" class="another_hover_thing"> 
<a class="hover_thing"></a> 
</div> 

凡.hover_thing和以前一样，但盘旋在它也导致因为第二锚或div#first的二次悬停改变。

我也试过用jQuery通过使用工具提示插件和whatnot（特别是来自flowplayer.org，simpletip和qTip的jQuery Tooltip）来做到这一点，但这些也打破了第一组代码的悬停。

这是不可能的，还是我只是做这个错误？同样在这一点上，我不仅仅接受CSS答案，所以任何Javascript解决方案都是值得欢迎的。

Answer 1

我仍然使用CSS。

只需将second_hover_thing放入HTML中，并在CSS中输入display:none即可。

然后给它display:inline，当它的父亲#first得到:hover。

CSS

#first .second_hover_thing { 
    display:none; 
} 
#first:hover .second_hover_thing { 
    display:inline; 
} 

HTML

<div id="first"> 
    <a class="hover_thing">hover thing</a> 
    <a class="second_hover_thing">second hover thing</a> 
</div> 

或者，如果你想让它特异性激活悬停在hover_thing时，你可以试试这个：

.second_hover_thing { 
    display:none; 
} 
.hover_thing:hover + .second_hover_thing { 
    display:inline; 
} 

...虽然我不知道+选择器的跨浏览器支持。你必须测试。

From quirksmode，它看起来像+有一些IE问题，所以一定要测试。