兄弟要素のフェード CSS エフェクト

はじめに

この実験では、「兄弟要素のフェード」と呼ばれる CSS エフェクトを実装する方法を学びます。このエフェクトにより、ホバーした要素の兄弟要素がフェードアウトし、ホバーした要素は完全に表示されたままになります。このエフェクトを、シンプルでエレガントな方法で CSS セレクタとトランジションを使って実現します。この実験が終わるとき、CSS を使って動的で対話型のウェブコンテンツを作成する方法をより深く理解しているでしょう。

兄弟要素のフェード

VM 内には既にindex.htmlとstyle.cssが用意されています。

ホバーした要素の兄弟要素をフェードアウトさせるには：

1. transitionプロパティを使ってopacityの変更をアニメーションさせます。

span {
  padding: 0 16px;
  transition: opacity 0.3s;
}

2. :hoverと:not疑似クラスセレクタを使って、マウスが乗っていない要素以外のすべての要素のopacityを0.5に変更します。

.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}

以下は HTML コードの例です：

<div class="sibling-fade">
  <span>Item 1</span> <span>Item 2</span> <span>Item 3</span>
  <span>Item 4</span> <span>Item 5</span> <span>Item 6</span>
</div>

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！あなたは兄弟要素のフェードの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習できます。