不同的链接 CSS 悬停样式无法按预期工作...？

Question

我有多种用于链接悬停状态的 CSS 样式。

基本链接悬停样式：

a:hover {
    opacity: .7;
{

然后，我有网格元素，它们本身就是链接，具有变换样式；但是，我不希望他们的不透明度改变......但我似乎无法让它正常工作？下面是整个网格和网格元素的代码：

HTML：

<div class="prevnextgrid">
    <a href="link I'm using">
        <div class="left">
            left grid element content
        </div>
    </a>
    <a href="other link I'm using">
        <div class="right">
            right grid element content
        </div>
    </a>
</div>

CSS：

.prevnextgrid {
    margin-top: 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}

.prevnextgrid div {
    position: relative;
    transition-duration: .2s, .2s;
    transition-timing-function: linear, ease-in-out;
}

.prevnextgrid div.left:hover {
    -webkit-transform: translatex(-3px);
    transform: translatex(-3px);
}

.prevnextgrid, div.right:hover {
    -webkit-transform: translatex(3px);
    transform: translatex(3px);
}

然后，为了清楚起见，我添加了额外的 CSS 样式只是为了澄清我不希望这些网格元素链接在悬停时改变不透明度：

a.prevnextgrid div.left:hover {
    opacity: 1;
}

a.prevnextgrid, div.right:hover {
    opacity: 1;
}

它不起作用，我不知道为什么。我尝试了各种不同方向的 css 样式，但似乎都不起作用。也许我错过了一个正确的，应该让它工作？谁能帮帮我？

Answer 1

您的选择器需要如下：

.prevnextgrid div {
    position: relative;
    transition-duration: .2s, .2s;
    transition-timing-function: linear, ease-in-out;
}

.prevnextgrid a:hover div.left {
    -webkit-transform: translatex(-3px);
    transform: translatex(-3px);
}

.prevnextgrid a:hover div.right {
    -webkit-transform: translatex(3px);
    transform: translatex(3px);
}

为了避免鼠标悬停时的默认不透明度变化，您需要添加

.prevnextgrid a:hover {
  opacity: 1;
}