jquery - 连接两个独立 anchor 的悬停规则？

Question

下面的 fiddle 显示每个相应页面的图像链接和文本链接。当悬停在每个图像上时，会使用 css 显示彩色版本。悬停时，文本链接只是在底部有一个边框。

我需要在悬停相应的文本链接时使图像着色，并且在悬停相应的图像时显示文本链接的边框。我怎样才能把这些联系在一起？

参见 this fiddle ，或查看下面的 CSS 代码:

#chorus
{
    background: url('../images/work-icons/icon-chorus to size BW.jpg');
    height: 85px;
    left: 30px;
    position: fixed;
    top: 78px;
    width: 113px;
    display: block;
}

#chorus:hover
{
    background: url('../images/work-icons/chorus-icon to size.jpg');
    border-bottom: none;
}

#chorus-text-link {
    left: 180px;
    position: fixed;
    top: 111px;
}

Answer 1

通过向您的图像和链接添加父元素，您可以实现如下结构:

<span>
    <a href="chorus.html" id="chorus"></a>
    <a href="chorus.html" id="chorus-text-link">Chorus 2014</a>
</span>

然后简单地为新创建的父项及其子项编写悬停规则:

span:hover #chorus
{
    background: url('http://georgewoolfe.com/new-website/images/images-3copy.jpeg');
    border-bottom: none;
}

--

要在图像悬停时为链接添加下划线，请添加仅适用于跨度(文本链接)的第二个子项的规则:

span:hover a:nth-of-type(2) {
    border-bottom: 1px solid;
}