少 - 按钮：悬停不起作用

Question

在悬停按钮时，我想显示隐藏的元素。它不起作用，出了什么问题？

codepen

LESS

button{
 color: red;

 &:hover{
   h1{
     display: block;
   }
 }
}

h1{
  display: none;
}

HTML

<button> hover me </button>

<h1> you are hovering </h1>

Answer 1

你的LESS正在编译为button:hover h1 - 换句话说，<h1>是一个悬停按钮的孩子。

尝试&~h1而非h1。这将使它适用于兄弟姐妹。 Demo

Answer 2

试试这个：

button{
  color: red;
  &:hover + h1{

      display: block;

  }
}

    h1{
      display: none;
    }