より少ないCSS＆：ホバー

Question

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

.class {
    display: none;
}

a:hover .class {
    display: block; 
}

Answer 1

このような？

.class {
    display: none;

    a:hover & {
        display: block;
    }
}

Answer 2

.class {
  display: none;

  &:hover {
    display: block;
  }
}

Answer 3

与えられたCSSコードから、HTML構造は次のようになっていると思います。

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

あなたが達成したいことはLessを使用してかなり簡単であることを知って幸せになるでしょう。以下に示すコードは次のとおりです。

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

これがお役に立てば幸いです。