less - より少ないcss＆：hover

Question

このクラスをより少ないコストで作成するにはどうすればよいですか？

.class {
    display: none;
}

a:hover .class {
    display: block; 
}

Answer 1

このような？

.class {
    display: none;

    a:hover & {
        display: block;
    }
}

Answer 2

指定された CSS コードから、HTML 構造が次のようになっていると想定しています。

<a>
    <div class="class">Content</div>
</a>

Less を使用すると、実現したいことがかなり簡単になることがわかってうれしいです。以下に示すコードは次のとおりです。

a {
    &:hover {
        .class {
            //Apply styling here
        }
    }
}

これが役立つことを願っています。