Question

当一个图像悬停在上方时，我想更改其他img的不透明度。我可以这样做吗？

.layers-animation img:nth-child(4):hover {
    transform: translate(180px, -200px);
    transition: 0.5s;

    /* I want to be able to do this V */

    .layers-animation img {
        opacity: 0.5;
        transition: 0.5s;
    }

    /* (Change the opacity of all the other images when this image is hovered over.) */

}

在CSS3中有什么方法可以做到这一点吗？

Answer 1

我认为这就是您想要的。

https://codepen.io/kalpeshshende/pen/JmZeyK

<!DOCTYPE html>
<html>
<head>
    <style>
        .main{
            height: 300px;width: 300px;
            background: red;display: grid;
            grid-gap: 10px;
            padding: 10px;grid-template-columns: 1fr 1fr 1fr;
        }
        .main:hover > div{
            opacity: 0.5;
        }
        .subMain{
            background: yellow;
        }
        .main:hover > div:hover{
            opacity: 1;
        }
    </style>
    <title></title>
</head>
<body>
    <div class="main">
        <div class="subMain">1</div>
        <div class="subMain">2</div>
        <div class="subMain">3</div>
        <div class="subMain">4</div>
        <div class="subMain">5</div>
        <div class="subMain">6</div>
        <div class="subMain">7</div>
        <div class="subMain">8</div>
        <div class="subMain">9</div>
    </div>
</body>
</html>

Answer 2

在CSS中，您可以选择元素后跟+的单个兄弟姐妹，以及元素后~的所有兄弟姐妹

所以如果你有两张图片

<img class="img-one>
<img class="img-two>

您这样做

.img-one:hover + .img-two {
 * your css rules here *
}

在这种情况下不起作用：

如果您要选择上一个元素
如果两个元素嵌套且不是直接兄弟姐妹

那是因为css的工作原理，您只能控制css元素之后的内容，而之前的内容不能更改。

我可以在HTML / CSS的另一个元素的规则内更改另一个元素的规则吗？

2 个答案: