"Do not tell me how to make sure that when you hover on an element it changes color and the other elements darken."

Well, I'll go easier, there is a menu, there are 5 elements in it, pointing the cursor at one element, it changes color with me, and the other elements in the menu change color to another.

There is no groundwork, I understand the principle. If this is easier, here is a list of 5 items.

<div class="nav"> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div>
  • 3
    Do you have any groundwork from which you can push off? - Rogatnev Nikita 1:02
  • Do you know scss? I understood what you meant - Antonio112009
  • No, I do not know scss - Gleb Pristupa
  • Good stuff !!! I recommend to read. This is the same css, only easier - Antonio112009

2 answers 2

As I understand you wanted to achieve this:
( open the code and run it)

 .nav ul:hover li > a { color: grey; } .nav ul li a { text-decoration: none; color: black; transition: all .2s ease-in-out; } .nav ul li a:hover { color: red; } 
 <div class="nav"> <ul> <li><a href="">Первое</a></li> <li><a href="">Второе</a></li> <li><a href="">Третье</a></li> <li><a href="">Четвертое</a></li> <li><a href="">Пятое</a></li> </ul> </div>

As I implemented it in SCSS :

 .nav{ ul{ &:hover li > a{ color: grey; } li{ a{ text-decoration: none; color: black; transition: all .2s ease-in-out; &:hover{ color: red; } } } } }

How SCSS "translates" code into normal CSS :

 .nav ul:hover li > a { color: grey; } .nav ul li a { text-decoration: none; color: black; transition: all .2s ease-in-out; } .nav ul li a:hover { color: red; }
  • Thank you, I think while I have to feel confident in css, without sass, less, etc. - Gleb Pristupa
  • @GlebPristupa but I highly recommend it later! will help a lot in the future - Antonio112009
  • is this sass? - Gleb Pristupa 2:41
  • @GlebPristupa well, in fact, yes. SASS / SCSS, but SCSS, in my opinion, more convenient - Antonio112009

 .nav ul { box-sizing: border-box; padding: 0; background: grey; list-style-type: none; display: flex; } .nav ul:hover { background: lightgray; color: blue; } .nav li { flex-grow: 1; } .nav a { display: block; color: red; text-decoration: none; padding: 20px; border: 1px solid black; } .nav a:hover { color: blue; background: gray; } 
 <div class="nav"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </div>