Question

我正在使用WordPress建立一个网站，而我正在使用的主题已悬停在后期效果上。我想反转它，所以在悬停之前后期图像会变暗，而在鼠标悬停时它会变成全彩色。

我并不熟悉CSS，但这可能是正确的代码：

.posts { margin-top: -3.95%; }

.posts .post {
    display: block;
    background-color: #ffffff;
    width: 30.7%;
    margin-top: 3.95%;
    padding-bottom: 30.7%;
    float: left;
    position: relative;
    background-size: cover;
    background-position: center;

}

.posts .post + .post { margin-left: 3.95%; }
.posts .post:nth-child(3n+1) { margin-left: 0; }

.post-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.archive-post-overlay {
    background: #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.sticky .post-overlay > p {
    position: absolute;
    top: 30px;
    left: 30px;
    font-size: 0.875em;
    text-transform: uppercase;
    color: #999;
}

.sticky .post-overlay > p span {
    margin-right: 9px;
    font-size: 18px;
    position: relative;
    bottom: -1px;
}

.archive-post-header {
    position: absolute;
    right: 30px;
    bottom: 30px;
    left: 30px;
}

.archive-post-title {
    font-size: 1.375em;
    line-height: 120%;
    font-weight: 700;
    text-transform: uppercase;
    color: #222;
    word-break: break-word;
    -ms-word-break: break-word;
}

.archive-post-date {
    margin-bottom: 5px;
    font-size: 0.875em;
    color: #999;
    text-transform: uppercase;
}

.post:hover .post-overlay { opacity: 1; }
.post:hover .archive-post-title { color: #3bc492; }

Answer 1

您有一个隐藏的叠加层（opacity: 0），然后在:hover上，叠加层显示（opacity: 1）。您希望将其反转，以便默认情况下可以看到叠加层，并在悬停时隐藏。

这些更改位于style.css

中

〜第604行，.post-overlay删除opacity: 0.5
〜第669行，.has-post-thumbnail .post-overlay删除opacity: 0
〜第664行，.post:hover .post-overlay将opacity: 1更改为opacity: 0。

反向悬停对帖子的影响

1 个答案: