html - LESS - 按钮 :hover does not work

Question

悬停按钮时我想显示一个隐藏的元素。它不起作用，有什么问题吗？

codepen

少

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 .这将使它适用于 sibling 。 Demo