はじめに
この実験では、「兄弟要素のフェード」と呼ばれる CSS エフェクトを実装する方法を学びます。このエフェクトにより、ホバーした要素の兄弟要素がフェードアウトし、ホバーした要素は完全に表示されたままになります。このエフェクトを、シンプルでエレガントな方法で CSS セレクタとトランジションを使って実現します。この実験が終わるとき、CSS を使って動的で対話型のウェブコンテンツを作成する方法をより深く理解しているでしょう。
これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。
兄弟要素のフェード
VM 内には既にindex.htmlとstyle.cssが用意されています。
ホバーした要素の兄弟要素をフェードアウトさせるには：
transitionプロパティを使ってopacityの変更をアニメーションさせます。
span {
padding: 0 16px;
transition: opacity 0.3s;
}
: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 でさらに多くの実験を練習できます。