Условие для hover эффекта

190

18 марта 2022, 03:20

Есть меню из 5 элементов, ко всем элементам применяется hover эффект. Мне нужно сделать так, чтобы 1 элемент меню статично был залит цветом, но при наведении на другие элементы, hover для первого элемента отменялся. Можно ли так сделать только с помощью css?

.cat_menu a:hover,.cat_menu a:active{
    color: #ffffff !important;
    background: #098DC4;
}

Answer 1

Вообще-то при наведение на ДРУГИЕ элементы и без того отменяется hover у элемента, на котором мышь была раньше:

.cat_menu {display:inline-block;} 
.cat_menu a {padding: 1em; border:1px solid gray;} 
 
.cat_menu a:hover,.cat_menu a:active{ 
    color: #ffffff !important; 
    background: #098DC4; 
}

<div class="menu"> 
  <div class="cat_menu"><a href="#">Menu item</a></div> 
  <div class="cat_menu"><a href="#">Menu item</a></div> 
  <div class="cat_menu"><a href="#">Menu item</a></div> 
  <div class="cat_menu"><a href="#">Menu item</a></div> 
  <div class="cat_menu"><a href="#">Menu item</a></div> 
</div>

Если этого не происходит, то налицо неадекватная комбинация CSS+HTML, например, такая:

.cat_menu {display: inline-block;} 
.cat_menu a {padding: 1em;  border: 1px solid gray;} 
 
.menu:hover a { 
  color: #ffffff !important; 
  background: #098DC4; 
}

<div class="menu"> 
  <div class="cat_menu"><a href="#">Menu item</a></div> 
  <div class="cat_menu"><a href="#">Menu item</a></div> 
  <div class="cat_menu"><a href="#">Menu item</a></div> 
  <div class="cat_menu"><a href="#">Menu item</a></div> 
  <div class="cat_menu"><a href="#">Menu item</a></div> 
</div>

Если вам действительно по-какой-то причине нужно, чтобы при наведении на них ВСЕ элементы получали новый цвет, но ПЕРВЫЙ имел этот по умолчанию и терял при наведении на остальные (я правильно предполагаю, что это типа поведения активного элемента?), то это можно сделать, например, так:

.cat_menu {display: inline-block;} 
.cat_menu a {padding: 1em;  border: 1px solid gray;} 
 
.menu a:hover, .menu .current a { 
  color: #ffffff !important; 
  background: #098DC4; 
} 
 
.menu:hover .current a:not(:hover) { background:unset; color:blue!important;}

<div class="menu"> 
  <div class="cat_menu current"><a href="#">Menu item</a></div> 
  <div class="cat_menu"><a href="#">Menu item</a></div> 
  <div class="cat_menu"><a href="#">Menu item</a></div> 
  <div class="cat_menu"><a href="#">Menu item</a></div> 
  <div class="cat_menu"><a href="#">Menu item</a></div> 
</div>

Answer 2

Что бы селектор ~ работал выделенный пункт всегда должен быть последним в html. При это остальные пункты можно расставить произвольно, а визуально расположить их по порядку в помощью css-свойства order.

* { 
  padding: 0; 
} 
 
body { 
  display: flex; 
  min-height: 100vh; 
} 
 
.parent { 
  margin: auto; 
  display: flex; 
  flex-direction: column-reverse; 
} 
 
.item { 
  padding: 0 1em; 
  line-height: 2; 
  border: 1px solid black; 
  background-color: white; 
  color: black; 
  list-style: none; 
} 
 
.item:not(:last-child) { 
  border-top: none; 
} 
 
.static { 
  background-color: magenta; 
  color: white; 
} 
 
.item:hover { 
  background-color: magenta; 
  color: white; 
} 
 
.item:hover~.static { 
  background-color: white; 
  color: black; 
}

<ul class="parent"> 
  <li class="item">Пункт 5</li> 
  <li class="item">Пункт 4</li> 
  <li class="item">Пункт 3</li> 
  <li class="item">Пункт 2</li> 
  <li class="item static">Пункт 1</li> 
</ul>