7 / 7 / 3
Регистрация: 15.01.2014
Сообщений: 459
1

Изменение стилей элементов с помощью hover

29.06.2016, 02:36. Показов 1054. Ответов 6
Метки нет (Все метки)

Доброй ночи. Есть следующий блок:

HTML5
1
2
3
4
5
6
<div class='main-block'>
    <div class='block-1'>
    </div>
    <div class='block-2'>
    </div>
</div>
Я хочу, чтобы при наведении на блок-1 применялись стили к блоку-2, но почему-то заданное мной правило не работает.

CSS
1
2
3
.main-block .block-1:hover .main-block .block-2 {
background: #fff;
}
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
29.06.2016, 02:36
Ответы с готовыми решениями:

Изменение стилей элемента с помощью псевдокласса hover
Здравствуйте. Нужно сделать такой эффект при наведении, как на картинке, без использования...

Изменение фона label с помощью hover
вопрос довольно прост, есть код предположим некоторые три input аля radio кнопка в label вывожу...

Изменение фона ссылки с помощью псевдокласса :hover
Необходимо сделать так, чтобы при наведение на одну любую из ссылок, ее фон менял цвет на прозрачно...

Вёрстка с помощью псевдоклассов hover и active
Здравствуйте. Решил постигать азы верстки и столкнулся с такой проблемой: hover и active не...

6
90 / 22 / 35
Регистрация: 29.06.2016
Сообщений: 96
29.06.2016, 07:54 2
Если я правильно понял вопрос, то можно так
CSS
1
2
3
4
5
6
.main-block:hover .block-1 {
  background: #eee;
}
.main-block:hover .block-2 {
  background: #fff;
}
https://jsfiddle.net/mkqmc10g/
0
Модератор
Эксперт JSЭксперт HTML/CSS
3814 / 2666 / 1519
Регистрация: 12.07.2015
Сообщений: 6,662
Записей в блоге: 4
29.06.2016, 07:57 3
Лучший ответ Сообщение было отмечено OpenGoodwin как решение

Решение

CSS
1
2
3
4
5
6
7
8
9
10
.block-1,
.block-2 {
  background: #ece;
  width: 100px;
  height: 100px;
}
 
.block-1:hover ~.block-2 {
  background: green;
}
HTML5
1
2
3
4
<div class='main-block'>
  <div class='block-1'>  </div>
  <div class='block-2'>  </div>
</div>
1
7 / 7 / 3
Регистрация: 15.01.2014
Сообщений: 459
29.06.2016, 12:50  [ТС] 4
mrtoxas, а что делает эта ~?
0
Модератор
Эксперт JSЭксперт HTML/CSS
3814 / 2666 / 1519
Регистрация: 12.07.2015
Сообщений: 6,662
Записей в блоге: 4
29.06.2016, 13:14 5
Это родственный селектор
0
7 / 7 / 3
Регистрация: 15.01.2014
Сообщений: 459
30.06.2016, 02:31  [ТС] 6
mrtoxas, а как я могу обратится к элементу h6?

HTML5
1
2
3
4
<div class="main-block">
    <h6>Text</h6>
    <div class="block-1"></div>
</div>
CSS
1
2
3
.main-block .block-1:hover ~h6 {
color: #fff;
}
Так не работает
0
Модератор
Эксперт JSЭксперт HTML/CSS
3814 / 2666 / 1519
Регистрация: 12.07.2015
Сообщений: 6,662
Записей в блоге: 4
30.06.2016, 09:11 7
И не будет. Элемент должен быть ниже в дереве DOM. Можно или спозиционировать элементы так, чтобы визуально сначала был заголовок, а потом блок, или прибегать к js.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
30.06.2016, 09:11

Смена изображений с помощью псевдокласса :hover
&lt;div id=&quot;r1&quot;&gt; &lt;img src=&quot;images/magnitol.png&quot;&gt; &lt;/div&gt; div#r1:hover{...

Изменение стилей
Доброго всем времени суток. Собственно, есть следующая тема для WP:...

Изменение стилей инпутов
Как изменить стиль инпутов, таких как tyрe=number. Или &lt;select&gt;. интересуют стили именно стрелочек.

Изменение стилей iframe
Здравствуйте, такая ситуация. Через iFrame подгружаю информацию с чужого сайта, но вместе с этим...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.