Как правильно прописать CSS?

Question

[boiko200]

Добрый день. Как правильно прописать CSS/JS что бы сработало условие:
При наведение на блок с классом "click1" меняется фон в секции с класом "block1".

Примерный код:

<section class="block1">
<div class="container">
	<div class="row">
		<div class="col-12 col-md-6 col-lg-4">
			<div class="click1 item">
				<span> Преимущество 1</span>
			</div>
		</div>
	</div>
</div>

 </section>

Если пробовать работать по такой схеме, то не работает:

<style>
	.click1{} 
.block1{
		background:#fff;
} 
.click1:hover .block1{
		background#000;}
	</style>

Comments

[Павел]

Попробуй так:

.block1 .click1:hover {
    background: #000;
}

[Алексей]

у CSS нет селектора к родителю

Answer 1

[Алексей]

Просто через CSS врятле можно решить. С помощью JS'а просто вешаешь ивент на ховер и береш ближайший блок от этого елемента https://developer.mozilla.org/ru/docs/Web/API/Elem..., например .block1, дальше уже задаешь с помощью JSа стиль

Тоесть примерно так. Без всяких блок1, блок2, блокN, просто класс block

[...document.querySelectorAll('.item')].forEach(item => {
	item.addEventListener('mouseenter', function (e) {
	   e.target.closest('.block').style.background = '#000';
	});
	item.addEventListener('mouseleave', function (e) {
		e.target.closest('.block').style.background = '#fff';
	});
});

Я правда так и не понял почему бы просто на блок ховер не повесить, ну да ладно

Comments

[boiko200]

С цветом работает, спасибо, но как быть, если фон - изображением должно показывать? Если вводить так, то непоказывает:

[...document.querySelectorAll('.click1')].forEach(item => {
  item.addEventListener('mouseenter', function (e) {
     e.target.closest('.block4').style.backgroundImage = 'url('/bitrix/images/icons/trustability_icon.svg')';
  });
  item.addEventListener('mouseleave', function (e) {
    e.target.closest('.block4').style.backgroundImage = 'url('/bitrix/images/icons/trustability_icon.svg')';
  });
})

[Алексей]

boiko200, он у тебя здесь даже ошибку чтоле не плюет ?

'url('/bitrix/images/icons/trustability_icon.svg')'

попробуй

"url('/bitrix/images/icons/trustability_icon.svg')"
// там вообще помойму можно без ковычек 
'url(/bitrix/images/icons/trustability_icon.svg)'

Answer 2

[Владислав Черненко]

Смысл тот-же Как на JS сделать смену цвета при наведении мышки?

Вешаешь класс на блок при наведении, дальше стилями уже как нравится.