自分が勉強をはじめてまだ間もない時、CSSの擬似クラスの:hoverで初めて動きをつけられて感動したのを覚えています。今回はある要素にhoverをした時に子要素、兄弟要素などの別の要素にアクションをさせる方法を解説します。今回は下記の2パターンについて解説していきます。1hover時にその子要素にアクションをさせる2hover時にその兄弟要素にアクションをさせるでは詳しく解説していきます。hover時にその子要素にアクションをさせる今回使用するベースのHTMLとCSSのソースが下記です。}上記の実装結果は下記の画像のようになります。親要素に対して子要素をど真ん中に来るようにしています。続きを見るではこの子要素である白色の「action」にhover時にアクションがされるように記述していきます。今回は親要素にhoverした時に子要素が下にいくアクションを実装します。-10%);}では水色のボックスにhoverしてみてください。↓↓actionうまく動きましたね。結論として擬似クラスの:hoverを親要素に設定すればOKですね。}hover時にその兄弟要素にアクションをさせる続きまして兄弟要素にアクションさせる方法について説明します。下記がベースのHTMLとCSSのソースです。.5s;}このような形です。今回は水色の親要素にhoverした時に、兄弟要素であるピンクの「bros」にアクションをさせていきます。記述は下記になります。lightgreen;}水色のボックスにhoverしてみてください。hoverbros兄弟要素を指定する「~」は、今回の例でいうと「+」に変更しても問題なく動きます。...忘れがちなセレクタをまとめました。<前編>スマホでは...?hoverアクションはPCでは自分が思った通りに動かせるのですが、スマホになるとトリガーのタイミングだったり、2回タップしないとリンク先に飛ばなかったりすることがあります。個人的には指で隠れてアクション自体見れないこともあるので、スマホでhover設定は不要かなと思っています。実際スマホに実装しているサイトは少なく、私はレスポンシブデザインで実装するときはではPCだけhoverアクションをつけてSPでは抜いています。ここに関しては意見が分かれるところですので、柔軟に判断していただければと思います。まとめ今回はある要素にhoverした時に別要素である子要素と兄弟要素にアクションをさせる方法を解説しました。2例に共通するルールは下記になります。スキルアップ【CSS】テキストにマスク掛け。画像をテキストの形にクリッピング。(background-clip)CSS小技集。勉強しててイイなと思ったテクを共有します。スキルアップ【CSS】:first-childと:first-of-typeの違いは?last-childとlast-of-typeも同じ考え方first-childとfirst-of-typeの違いです。この二つは似ているのでときどき混乱しますので詳しく解説します。last-childとlast-of-type、nth-childとnth-of-typeの違いもこの考え方と同じです。スキルアップ【HTML】SEOにも効果的なセマンティックコーディングとは?セマンティックコーディングを理解することで、コード自体の可読性を上げ、SEOにも効果的なHTMLの記述が可能になります。背景に格子・ストライプを表現するコンテンツ背景に格子状のデザインやストライプのデザインを背景に引く方法をお教えします。first-child・nth-of-type...兄弟要素で最初の要素、n番目の要素を指定できる頻出擬似クラス6つ<後編>今回はセレクタ解説の後編です。【CSS】文字を下線(アンダーライン)で目立たせる3つの方法フロントエンドエンジニアYamato(やまと)7年目のフロントエンドです。サンフランシスコ留学の際にITの素晴らしさに触れエンジニアになると決心。独学で未経験からアルバイトで採用され入社。経験し2022年8月に独立しました。HTML/CSS・JS・WordPress・Shopifyを触っています。YAMATOdevlog。