Question

下面的小提示显示每个相应页面的图像链接和文本链接。每个图像悬停在上面时，使用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;
}

连接两个单独锚点的悬停规则？

1 个答案: