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

Question

Как сделать так, чтобы при наведении на другие пункты меню 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>

Answer 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>

БЛОГ НА HUSL

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

Ответы (1 шт):