Как взаимодействовать с блоком2, наводя на блок1?

Question

[Jevgenii]

.a:hover .i
display: none
нужно чтобы при наведении на класс .a изменялся класс .i
выше написанная конструкция не работает. Пишу на sass

Comments

[Ankhena]

Пишу на sass

Очень круто. Но желательно сначала с основами CSS ознакомиться.

Дочерние селекторы
Соседние селекторы
Родственные селекторы

Если самостоятельно никак, то приложите еще HTML, мы же не знаем в каких родственных отношениях классы a и i. Да и классы ли они вообще.

[alexalexes]

В каком отношении стоят элементы с классом "a" и с классом "i"?
В вашем примере селектор с классом "a" является родителем (контейнером), в котором лежит элемент с классом "i".

[Jevgenii]

<div class="footer">
	<div class="footer-arrow"></div>
	<div class="footer-in">

	<div class="footer-block footer-block_1">
		<div class="footer-project"><a href="#project-a" class="footer-project">Мои работы</a></div>
		<div class="footer-how"><a href="#how-a" class="footer-how">Как я работаю</a></div>
		<div class="footer-can"><a href="#can-a" class="footer-can">Я могу все</a></div>
		<div class="footer-reviews"><a href="#reviews-a" class="footer-reviews">Отзывы</a></div>
		<div class="footer-form"><a href="#" class="footer-form">Оставить заявку!</a></div>
	</div>

	<div class="footer-block footer-block_3">
		<div class="footer-number"><a href="tel:+793828" class="footer-number">+79324</a></div>
		<div class="footer-mail">[e-mail]</div>

		<a href="https://vk.com/im?peers=c53_421167817_489445827&sel=36877442" target="_blank"><div class="vk"></div></a>
		<div class="telegram"></div>
		<a href="https://www.instagram.com/volkovdenisdesign/"><img src="img/icons/inst.png" alt="" class="instagram" target="_blank"></a>
		<div class="viber"></div>

	</div>
	<div class="footer-down">2018 © Денис Волков</div>
</div>
</div>

[Jevgenii]

Ankhena, скинул html код

[Jevgenii]

alexalexes, скинул html код

[Jevgenii]

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

[Ankhena]

Jevgenii,

скинул html код

Ваще шикарно!
И что из этого .a и что .i?

[Jevgenii]

Ankhena, прости чет замучался, туплю, нужно чтобы при наведении на класс .viber появлялась стрелка .footer-arrow классы найдешь быстро через ctrl + f

[Ankhena]

Jevgenii, не выйдет
.footer-arrow должны в коде следовать после .viber
Варианты:
1. .footer-arrow должен быть внутри .viber = дочерние селекторы (будет так как вы хотели в вопросе)
2. родитель (или прародитель любого уровня) .footer-arrow или сам .footer-arrow должны находится на одном уровне с .viber = соседние или родственные селекторы (будет почти как вы хотели в вопросе, только вместо пробела + или ~ (при участии родительских оберток, соответственно, еще и вложенность))

[Ankhena]

Jevgenii, Если html менять нельзя, то обрабатывать hover на JS.

Answer 1

[profesor08]

<div class="a"></div>
<div class="b"></div>

.a:hovet ~ .b {
 display:none;
}

или

.a:hovet + .b {
 display:none;
}

Comments

[Jevgenii]

не работает(

[profesor08]

Работает, применять надо уметь. Элемент, который должен изменяться при наведении на другой элемент, должен быть либо его потомком, либо следовать после него и элемент, который является родительским узлом для первого, должен быть родителем и для второго.

[Jevgenii]

profesor08, спасибо, в cэтой ситуации мне не важно в каких связях будут дивы, но если они в разных секция допустим? только через js?

[profesor08]

Jevgenii, да