Question

我搜索了SO，甚至发现了一些相关的帖子，但似乎没有一个能解决我的问题。

这就是我所拥有的：

HTML：

            <div class="work">
                <a href="#">
                    <h2>
                        Work #1
                    </h2>
                    <p>
                        subtitle 1
                    </p>
                    <img src="img/img1.png" />
                </a>
            </div>

CSS：

.work {
    margin-top: 40px;
}
.work h2 {
    font-family: Cambria, serif;
    font-size: 24px;
    letter-spacing: -0.2;
}
.work p {
    font-family: Cambria, serif;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.2;
}
.work img {
    margin-top: 12px;
    max-width: 100%;
}
/* links */
.work a:link, a:visited, a:active {
    color: red;
    text-decoration: none;
}
.work a:hover {
    color: #FF8000;
    text-decoration: none;
}

尽管它有效，但我希望<h2>和<p>在不悬停时是不同的颜色。对于代码现在它们是默认的黑色，但这不是我需要的。

如果我在<h2>或<p>上设置了一种颜色，这种颜色与悬停颜色重叠，我不明白为什么。

我知道这是一件非常简单的事情，但似乎无法掩盖它。任何帮助赞赏。感谢。

Answer 1

我认为它会对你有帮助......

HTML：

    <div class="work">
        <a href="#">
            <h2>
                Work #1
            </h2>
            <p>
                subtitle 1
            </p>
            <img src="img/img1.png" />
        </a>
    </div>

CSS：

        .work {
            margin-top: 40px;
        }
        .work h2 {
            font-family: Cambria, serif;
            font-size: 24px;
            letter-spacing: -0.2;
        }
        .work p {
            font-family: Cambria, serif;
            font-size: 16px;
            line-height: 24px;
            letter-spacing: -0.2;
        }
        .work img {
            margin-top: 12px;
            max-width: 100%;
        }
        /* links */
        .work a:link, a:visited, a:active {
            color: black;
            text-decoration: none;
        }
        .work h2:hover {
            color: #FF8000;
            text-decoration: none;
        }
        .work p:hover {
            color: green;
            text-decoration: none;
        }

同时悬停多个元素

1 个答案: