Выбор селектора - HTML и CSS

vdekameron · 03.03.2016, 16:46

Добрый день уважаемые. У меня затык. Помогите пожалуйста советом.
При наведении курсора на .module-2 мне нужно воздействие на .element-2 и .element-1. Это вообще возможно?? Если да подскажите как, через запятую селекторы перечислить не работает, с пробелом между ними тоже...

Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<htad>
    <title> animation1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        p{text-align:center;}
        body{font-family:'times new roman',arial, sans-serif;}
        
        div.conteiner{
            position:relative;
            left:200px;
            top:250px;
            width: 1485px;
        }
        
        div.module{
            width:150px;
            height:150px;
            border:1px dashed grey;
            border-radius:10px;
            display: inline-block;
            margin-right: 30px;
        }
        
        .element{
            width:148px;
            height:148px;
            border:1px dashed transparent;
            border-radius:10px;
            display: inline-block;
            margin-right: 30px;
            background:bisque;
            transform-origin: left bottom;
        }
        
        
        .module-1:hover .element-1{
            animation-name:transform;
            animation-duration: 1s;
            animation-timing-function:linear;
            animation-fill-mode:forwards;
        }
        
        .module-2:hover .element-2{
            animation-name:transform;
            animation-duration: 1s;
            animation-timing-function:linear;
            animation-fill-mode:forwards;
        }
        
        
        @keyframes transform{
            0%{transform:rotate(0deg);background:orange;}
            100%{transform:rotate(110deg);background:purple;}
        }
        
    </style>
</head>
<body>
    <div class="conteiner">
        <p>Наведите мышью на области</p>
            <div class="module module-1">
                <div class="element element-1"></div>
            </div>
            <div class="module module-2">
                <div class="element element-2"></div>
            </div>
            <div class="module module-3">
                <div class="element element-3"></div>
            </div>
            <div class="module module-4">
                <div class="element element-4"></div>
            </div>
            <div class="module module-5">
                <div class="element element-5"></div>
            </div>
            <div class="module module-6">
                <div class="element element-6"></div>
            </div>
            <div class="module module-7">
                <div class="element element-7"></div>
            </div>
            <div class="module module-8">
                <div class="element element-8"></div>
            </div>
    </div>
</body>
</html>

Nickf · 03.03.2016, 18:22

Что-то мне кажется без javascript на чистом css нельзя.

Так как родительского селектора и предыдущего сестринского в css нет.

Визуально можно.

Вставляете в один модуль position:relative; left:180px;
Вставляете в другой модуль position:relative; rigth:180px;

Модули визуально меняются местами. И при hover на одном, вращаться будет другой и наоборот.

Если надо такой эффект сразу для всех четырех, то расставьте их визуально в обратном порядке через свойство relative и обращайтесь к ним через сестринский селектор (div:hover+div)

Вадим Мошев · 03.03.2016, 18:23

Цитата:

При наведении курсора на .module-2 мне нужно воздействие на .element-2 и .element-1. Это вообще возможно?? Если да подскажите как, через запятую селекторы перечислить не работает, с пробелом между ними тоже...

Если делать это для того, что написано у вас, то добиться этого будет не очень легко, ИМХО, придётся немного поизвращаться с вёрсткой (посмотрите мой ответ в этой теме: http://www.programmersforum.ru/showthread.php?t=288931) или писать скрипты на JS/JQuery.

Однако, есть очень простое решение, но не знаю, подойдёт ли это вам. если вы хотите, чтобы при наведении на .module-2 у вас оказывалось воздействие на .element-1 и 2, то вы должны элементы .element-1 и 2 разместить внутри элемента с классом .module, после чего в CSS создать такие правила оформления:

Код:

.module-2:hover .element-1,
.module-2:hover .element-2 {
/*тут писать свойства*/
}

ProBeginner · 04.03.2016, 19:28

Возможно, если селектор будет относится к дочернему элементу или следующему. Предыдущий или родительский элемент в CSS не выразить, только JavaScript

03.03.2016, 18:22	#2
Nickf Новичок Джуниор Регистрация: 03.03.2016 Сообщений: 4	Что-то мне кажется без javascript на чистом css нельзя. Так как родительского селектора и предыдущего сестринского в css нет. Визуально можно. Вставляете в один модуль position:relative; left:180px; Вставляете в другой модуль position:relative; rigth:180px; Модули визуально меняются местами. И при hover на одном, вращаться будет другой и наоборот. Если надо такой эффект сразу для всех четырех, то расставьте их визуально в обратном порядке через свойство relative и обращайтесь к ним через сестринский селектор (div:hover+div) Последний раз редактировалось Nickf; 03.03.2016 в 18:30.

04.03.2016, 19:28	#4
ProBeginner Форумчанин Регистрация: 22.02.2016 Сообщений: 145	HTML CSS JavaScript Возможно, если селектор будет относится к дочернему элементу или следующему. Предыдущий или родительский элемент в CSS не выразить, только JavaScript Возьму в кредит мильён по 100% годовых на сто лет.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Выбор БД	DmitryVisuals	БД в Delphi	8	19.05.2013 18:20
Выбор БД	Рустам	БД в Delphi	13	16.10.2012 14:02
Выбор БД	W0LF	БД в Delphi	10	13.06.2012 08:12
ВЫБОР БД	chekanoff	БД в Delphi	10	16.09.2009 20:15
выбор бд	Roof	БД в Delphi	9	14.01.2009 08:04