Sass - 1つ以上の要素に遷移する

Question

要素を移動してこの要素に影響を及ぼそうとしていますが、別の要素には影響しません。私は、このクラスが100％に幅と0の幅に対するクラス.home-portfolioパスを更新することを望む.home-serviceを合わせると

これはSASSにhttps://jsfiddle.net/dgv0sas9/1/

.portfolio-services { 
 
    width: 100%; 
 
    height: 200px; 
 
    max-height: 200px; 
 
} 
 
.portfolio-services .rectangle, .portfolio-services .home-portfolio, .portfolio-services .home-services { 
 
    width: 50%; 
 
    height: 100%; 
 
    float: left; 
 
    cursor: pointer; 
 
} 
 
.portfolio-services .home-portfolio { 
 
    background-color: white; 
 
    -webkit-transition: width 2s ease; 
 
    -webkit-transform: translateZ(0); 
 
} 
 
.portfolio-services .home-services { 
 
    background-color: #222222; 
 
    -webkit-transition: width 2s ease; 
 
    -webkit-transform: translateZ(0); 
 
} 
 
.portfolio-services .home-services:hover { 
 
    width: 100%; 
 
} 
 
.portfolio-services .home-services:hover .home-portfolio { 
 
    width: 0%; 
 
}

<div class="portfolio-services"> 
 
    <div class="home-portfolio"></div> 
 
    <div class="home-services"></div> 
 
</div>

私のコードのバージョンです。

どうすればいいですか？

ありがとうございました

Answer 1

ここに書いた内容にはいくつか問題があります。

のは、次のコード行を見てみましょう：これは実際に言っている何

.portfolio-services .home-services:hover .home-portfolio { width: 0%; }

は.home-ポートフォリオは.home-サービスの子であるということです。あなたのHTML構造に基づいて、彼らはの兄弟であることがわかります

私は例hereを作成しましたが、まだ問題があります。スタイルはチェーンを下って行くことができます。この例では、説明したように最初のボックスだけが機能します（ホームポートフォリオ）。これは、兄弟がの後にとなる兄弟にのみ影響するためです。兄弟はの前にの前に来た兄弟を変更することはできません。

これは動作します： [A] ---> [B]

これはしません。 [A] < --- [B]

はここdifferent solutionです。 .home-servicesは.home-portfolioを変更することができないため、異なるタクトを試すことができます。この場合、何も縮小していませんが、レイアウトはあなたが提案した方法で調整しています。さらに、私は変換を使用することを選択しました。これは、アニメーションの幅がブラウザのパフォーマンスに悪影響を与えるため、とにかく移行するためのプロパティとして優れていると考えられています。