Могу ли я изменить правило другого элемента внутри правил другого элемента в HTML / CSS? - PullRequest
Новая
       0

Могу ли я изменить правило другого элемента внутри правил другого элемента в HTML / CSS?

0 голосов
/ 21 октября 2018

Я хочу изменить непрозрачность других изображений, когда наведено одно изображение.Могу ли я это сделать? 

.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?

Ответы [ 2 ]

0 голосов
/ 21 октября 2018

в CSS вы можете выбрать единственного брата, который идет после ваших элементов с +, и всех братьев и сестер, которые идут после вашего элемента с ~

, так что если у вас есть два изображения 

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

вы делаете это 

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

это не работает в следующих случаях:

  • , если вы пытаетесь выбрать предыдущий элемент
  • если эти два элемента являются вложенными и не являются прямыми братьями и сестрами

из-за того, как работает css, вы можете контролировать только то, что следует за вашим элементом css, то, что было визуализировано ранее, не может быть изменено.

0 голосов
/ 21 октября 2018

Я думаю, это то, что вы ищете.

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...