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

Question

所以现在我在某些元素上使用了:hover的CSS并且一切都很好，但现在悬停时需要一些text / 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而导致辅助悬停更改。

我也尝试过使用工具提示插件和诸如此类的东西（特别是来自flowplayer.org的jQuery Tooltip，simpletip和qTip），但这些也打破了第一组代码中的悬停。

这是不可能的还是我这样做错了？此时，我不仅仅是CSS答案，所以任何Javascript解决方案都非常受欢迎。

Answer 1

我仍然使用CSS。

只需将second_hover_thing放入HTML中，然后将其display:none放入CSS中。

然后在其父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问题，所以请务必进行测试。