Why doesn't the first :hover work in less?

Question

css

Hello, the problem is that &_wrapper:hover doesn't work for some reason. Well, at least crack, I can’t understand why ... Oddly enough, the &_link: hover following it works properly. Please tell me what could be the problem. Thanks in advance for your reply.
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>

Answer 1

If I understand correctly what you are trying to achieve, then you need to fix LESS like this:

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

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

The symbol &is the full path of the parent. Therefore, :hoverthere is no need to duplicate for _wrapper(it is already nested).
Take a look at the compiled CSS: codepen.io/anon/pen/JoONxO

Answer 2

To be honest, I'm not familiar with LESS. But, as far as I can see from the code, there is nesting. Does it need to be replaced

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

To something like

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

? I think it might be looking for a wrapper inside a wrapper.