0

меню

Как сделать так, чтобы при наведении на другие пункты меню border у smokes исчезал? Есть код:

.header_content a {
	text-transform: uppercase;
	color: #5EBCDF;
	font-weight: 700;
	padding: 10px;
	transition-duration: .3s;
}
.header_content_home:hover {
	box-shadow: inset 0 0 0 2px #FFDD00;
	color: #FFDD00;
}
.header_content_flash:hover {
	box-shadow: inset 0 0 0 2px #ffffff;
	color: #ffffff;
}
.header_content_smoke:hover {
	box-shadow: inset 0 0 0 2px #B2B2B2;
	color: #B2B2B2;
}
.header_content_molotov:hover {
	box-shadow: inset 0 0 0 2px #E75407;
	color: #E75407;	
}
<header>
		<div class="header_content">
			<a class="header_content_home loh" href="index.html">home</a>
			<a class="header_content_flash" href="flash.html">flash</a>
			<a class="header_content_smoke" href="smoke.html">smokes</a>
			<a class="header_content_molotov" href="molotov.html">molotov</a>
		</div>
	</header>

2
  • js в помощь. одного css не хватит тут
    – teran
    24 мая 2020 в 13:48
  • ты случаем не знаешь как это сделать?
    – Layka 228
    24 мая 2020 в 13:55

1 ответ 1

1

Вот пример как сделать это без JS. Отключаем pointer-events у родителя, но оставляем их у дочерних элементов:

body {
  background: #10202d;
}

.header_content {
  pointer-events: none;
}

.header_content a {
  text-transform: uppercase;
  color: #5EBCDF;
  font-weight: 700;
  padding: 10px;
  transition-duration: .3s;
  pointer-events: all;
}

.header_content_home:hover {
  box-shadow: inset 0 0 0 2px #FFDD00;
  color: #FFDD00;
}

.header_content_flash:hover {
  box-shadow: inset 0 0 0 2px #ffffff;
  color: #ffffff;
}

.header_content_smoke:hover {
  box-shadow: inset 0 0 0 2px #B2B2B2;
  color: #B2B2B2;
}

.header_content_molotov:hover {
  box-shadow: inset 0 0 0 2px #E75407;
  color: #E75407;
}

.active {
  box-shadow: inset 0 0 0 2px #B2B2B2;
}

.header_content:hover a.active:not(:hover) {
  box-shadow: none;
}
<header>
  <div class="header_content">
    <a class="header_content_home" href="index.html">home</a>
    <a class="header_content_flash" href="flash.html">flash</a>
    <a class="header_content_smoke active" href="smoke.html">smokes</a>
    <a class="header_content_molotov" href="molotov.html">molotov</a>
  </div>
</header>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.