web-dev-qa-db-ja.com

より少ないCSS&:ホバー

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

.class {
    display: none;
}

a:hover .class {
    display: block; 
}
9

このような?

.class {
    display: none;

    a:hover & {
        display: block;
    }
}
11
freejosh
.class {
  display: none;

  &:hover {
    display: block;
  }
}
9
Jason

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

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

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

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

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

1
ONDoubleB