не работает :hover у второй из 3х ссылок

Question

Не работает :hover у второй (из трёх) ссылок. Когда убираю третью ссылку :hover работает. В чём проблема?

header {
	width: 100%;
	height: 60px;
	top: 0;
	left: 0;
	position: fixed;
	background-color: #465bfa;
	box-shadow: 0 5px 10px #919191;
	z-index: 2;
}

nav {
	position: absolute;
	top: 10px;
	right: 20px;
	width: 600px;
	height: 56px;
	z-index: 3;
}

a {
	font-size: 32px;
	font-family: Arial;
	font-weight: 100;
	color: #fcfcfc;
	z-index: 4;
	position: relative;
	float: right;
	margin-left: 40px;
}

.position {
	width: 85px;
	height: 3px;
	top: 57px;
	right: 10px;
	position: fixed;
	background-color: #fcfcfc;
	border-radius: 2px 2px 0px 0px;
	transition: width 0.5s, right 0.5s;
}

a:hover {
	cursor: pointer;
}

.a-1:hover+.position {
	width: 185px;
	right: 140px;
}

.a-2 :hover+.position {
	width: 90px;
	right: 115px;
}

.a-3:hover+.position {
	width: 140px;
	right: 230px;
}

h1 {
	font-size: 32px;
	font-family: Arial;
	font-weight: 200;
	color: #fcfcfc;
	margin-top: 12px;
	margin-left: 60px;
	float: left;
	z-index: 5;
}

<header>
    <h1>Design</h1>

    <nav>
        <a class="a-1" onclick="a1();"> Web </a>
        <a class="a-2" onclick="a2();"> Mobil </a>
        <a class="a-3" onclick="a3();"> Desktop </a>
        <div class="position"></div>
    </nav>

</header>

Answer 1

У вас пробел перед :hover

.a-2 :hover

Вместо + используйте ~

.a-1:hover~

+ Выбирает элементы, которые расположены сразу после элемента на который мы навели

~ Выбирает все элементы, которые идут после выбранного элемента независимо от того есть ли между ними другие элементы

то есть в вашем случае ~ обойдет любое количество ссылок и достанет до position, а + должен сработать только при наведении на последнюю ссылку

       *{
           padding:0;
           margin:0;
           text-decoration:none;

       }

       header{
           width:100%;
           height:60px;
           top:0;
           left:0;

           position:fixed;
           background-color:#465bfa;
           box-shadow:0 5px 10px #919191;
           z-index:2;

       }

       nav{
           position:absolute;

           top:10px;
           right:20px;
           width:600px;
           height:56px;

           z-index:3;
       }

       a{
           font-size:32px;
           font-family:Arial;
           font-weight: 100;

           color:#fcfcfc;
           z-index:4;
           position:relative;
           float:right;

           margin-left:40px;
       }

       .position{
           width:85px;
           height:3px;
           top:57px;
           right:10px;

           position:fixed;
           background-color:#fcfcfc;
           border-radius:2px 2px 0px 0px;

           transition:width 0.5s, right 0.5s;

       }

       a:hover{cursor: pointer;}

       .a-1:hover~ .position{
           width: 69px;
           right: 17px;
       }

       .a-2:hover~ .position{
           width:90px;
           right:115px;
       }

       .a-3:hover~ .position{
           width:140px;
           right:230px;
       }

       h1{
           font-size:32px;
           font-family:Arial;
           font-weight: 200;

           color:#fcfcfc;

           margin-top:12px;
           margin-left:60px;
           float:left;
           z-index:5;
       }

   <header>
       <h1>Design</h1>

       <nav>
           <a class="a-1" onclick="a1();"> Web </a>
           <a class="a-2" onclick="a2();"> Mobil </a>
           <a class="a-3" onclick="a3();"> Desktop </a>
           <div class="position"></div>
       </nav>

   </header>

БЛОГ НА HUSL

не работает :hover у второй из 3х ссылок

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