Форум PHP программистов > Управление стилем предыдущего элемента

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Управление стилем предыдущего элемента

masterlelik

5.04.2016 - 10:31

Есть структура

<div class="sss">
<a href="">111</a>
<a href="">222</a>
</div>

Можно ли как-то при a:hover на вторую ссылку менять стиль для первой ссылки средствами CSS?

_____________

Миша

5.04.2016 - 10:35

js насколько я знаю

_____________
Принимаю заказы, писать в ЛС

Игорь_Vasinsky

5.04.2016 - 10:44

с :hover можно многое натворить https://habrahabr.ru/post/131848/

_____________
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, (TSql, BI OLAP, MDX), Mongo, Git, SVN, CodeIgnater, Symfony, Yii 2, JiRA, Redmine, Bitbucket, Composer, Rabbit MQ, Amazon (SQS, S3, Transcribe), Docker

masterlelik

5.04.2016 - 11:12

Насколько я знаю, то надо писать так, но так не срабатывает
a:hover .sss:first-child{color:red;}

_____________

sergeiss

5.04.2016 - 12:00

masterlelik, можно вот так сделать:

Вариант 1

.sss {
	background-color: yellow;
}

.sss:hover {
	background-color: blue;
}

.first:hover {
	background-color: red;
}

.second:hover {
	background-color: green;
}

Вариант 2

.sss {
	background-color: yellow;
}

.sss:hover a {
	background-color: blue;
}

a.first:hover {
	background-color: red;
}

a.second:hover {
	background-color: green;
}

<div class="sss">
<a class="first" href="">111</a>
<a class="second" href="">222</a>
</div>

То есть, ты меняешь стили как для родительского объекта, так и для дочерних. Одновременно при hover. И получаешь то, что тебе нужно.

Классы first и second я ввел для большей наглядности :) Тут можно разными способами сделать.

PS. Добавил "вариант 2" стилей. Мне кажется, так будет более правильно, т.к. изменения в стилях касаются не всех дочерних элементов класса sss, а только вложенных в него ссылок.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

masterlelik

5.04.2016 - 12:40

sergeiss
спасибо, через родительский элемент, то что нужно:)

Вот именно это правило:

.sss:hover a {
background-color: blue;
}

_____________

VeRTak

5.04.2016 - 16:13

masterlelik

в css3 есть циклы, там тоже можно много чего интересного сделать

Быстрый ответ:

Здесь расположена полная версия этой страницы.