不同的 link css 悬停样式无法按预期工作...？

Question

我有多个 CSS 样式用于 link 悬停状态。

基本 link 悬停样式：

a:hover {
    opacity: .7;
{

然后，我有自己的网格元素 links，具有变换样式；但是，我不希望他们的不透明度发生变化......但我似乎无法让它正常工作？这是整个网格和网格元素的代码：

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 样式来澄清我不希望这些网格元素 link 在悬停时改变不透明度：


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

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

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

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;
}

不同的 link css 悬停样式无法按预期工作...？

Different link css hover styles not working as desired...?

html

css

hyperlink

css-selectors