Почему не работает первый:hover в less?

Question

[Legioner911]

Здравствуйте, проблемам заключается в том что не работает почему то &_wrapper:hover . Ну хоть тресни, не могу понять почему... Как ни странно следующий за ним &_link:hover работает исправно. Подскажите пожалуйста в чём может быть проблема. Заранее спасибо за ответ.
Less

.nav-block{
		margin: 0;
		padding: 0;
		float: right;
		list-style: none;
		&_wrapper{
			display: inline-block;
			height: 114px;
			&_wrapper:hover{
				border: 4px solid #b86365;
			}
			&_link{
				text-decoration: none;
				color: #666;
				padding:0 16px 0 16px;
				border-right: 1px solid #666;
				line-height: 114px;
				text-align: center;
			}
			&_link:hover{
				color: #fff;
			}
		}
	}

Html

<ul class="nav-block">
				<li class="nav-block_wrapper"><a href="#" class="nav-block_wrapper_link">HOME</a></li>
				<li class="nav-block_wrapper"><a href="#" class="nav-block_wrapper_link">STYLE DEMO</a></li>
				<li class="nav-block_wrapper"><a href="#" class="nav-block_wrapper_link">FULL WIDTH</a></li>
				<li class="nav-block_wrapper"><a href="#" class="nav-block_wrapper_link">DROPDOWN</a></li>
				<li class="nav-block_wrapper"><a href="#" class="nav-block_wrapper_link">GALLERY</a></li>
			</ul>

Comments

[Роман Павлов]

Покажите разметку.

[Legioner911]

RomanPavlov: Здравствуйте, уже добавил )

Answer 1

[Роман Павлов]

Если я правильно понял чего вы добиваетесь, то надо поправить LESS примерно таким образом:

&_wrapper {
  display: inline-block;
  height: 114px;

  &:hover {
    border: 4px solid #b86365;
  }
}

Символ & представляет собой полный путь родителя. Поэтому для :hover не нужно дублировать _wrapper (он уже и так вложен).

Обратите внимание на скомпилированный CSS: codepen.io/anon/pen/JoONxO

Comments

[Legioner911]

Роман, огромное спасибо вам за помощь )

Answer 2

[Вадим Белкин]

.nav-block{
    margin: 0;
    padding: 0;
    float: right;
    list-style: none;

    &_wrapper{
      display: inline-block;
      height: 114px;

      &:hover{
        border: 4px solid #b86365;
      }

      &_link{
        text-decoration: none;
        color: #666;
        padding:0 16px 0 16px;
        border-right: 1px solid #666;
        line-height: 114px;
        text-align: center;

        &:hover{
          color: #fff;
        }
      }
    }
  }

Подобный кусок

&_wrapper{
      display: inline-block;
      height: 114px;
      &_wrapper:hover{
        border: 4px solid #b86365;
      }
  }

дает селектор .nav-block_wrapper_wrapper:hover (дублируете _wrapper)

Comments

[Legioner911]

Вадим, огромное спасибо вам за помощь )

Answer 3

[Владлен Грачев]

Честно говоря, не знаком с LESS. Но, насколько вижу из кода, тут есть вложенность. Не нужно ли заменить

&_wrapper{
      display: inline-block;
      height: 114px;
      &_wrapper:hover{
        border: 4px solid #b86365;
      }

На что-то вроде

&_wrapper{
      display: inline-block;
      height: 114px;
    }
    &_wrapper:hover{
      border: 4px solid #b86365;
    }

? Думается мне, оно может искать wrapper внутри wrapper'а.