【CSS】hoverしたら、孫要素の色を変更する

やりたいこと
contactButtonというクラスにホバーしたら、contactButtonArrowというクラスの中のspanタグの色を
$accent-colorという色に変更したい。
※$accent-colorは変数になります。

ちなみにspanタグは矢印をCSSで作っているようなイメージです。

Webサイトでよく見られるCVボタンに対しての、ホバーアクションになるかと思います。
contactButtonというクラスはボタンの振る舞いを決めています。(配色やサイズなど)

contactButtonの中の、contactButtonArrowというのは指定できるかと思いますが、
さらにその中のspanというのはCSSで指定することは難しいでしょうか。(JSしかない？)

お力添えいただきますと幸いです。

HTML

  <section class="secContact">
    <div class="commonInner">

      <h2>資料ダウンロード / お申込み</h2>
      <p>お名前、メールアドレス、ご住所をご記入をいただくと<br>下記ボタンより資料請求ダウンロードまたは、お申込みができます。</p>
      
      <a href="" class="contactButton">
        <p>資料をダウンロードする</p>
        
        <div class="contactButtonArrow">
          <span></span>
          <span></span>
        </div>
      </a>

      <a href="" class="contactButton">
        <p>お申込みをする</p>
        
        <div class="contactButtonArrow">
          <span></span>
          <span></span>
        </div>
      </a>

    </div> 
  </section>
コード

SASS

// お申し込みセクション
.secContact
  background-color:#575757
  .commonInner
    h2
      font-size: 4.5rem
      margin-bottom: 60px
      color: #fff
      text-align: center
    > p
      margin-bottom: 80px
      color: #fff
      text-align: center

    .contactButton
      background-color: $accent-color
      width: 800px
      height: 104px
      margin: 0 auto
      display: flex
      align-items: center
      justify-content: center
      transition: .3s
      border: solid 1px $accent-color
      position: relative
      font-size: 2.5rem
      color: #fff
      &:hover 
        background-color: #fff
        color: $accent-color  
        transition: .3s
      &:hover .contactButtonArrow span
        background-color: $accent-color  

      // >の矢印
      .contactButtonArrow
        position: absolute
        right: 180px
        span:nth-of-type(1)
          display: block
          transform: rotate(-45deg)
          width: 2px
          height: 14px
          background-color: #fff
          position: relative
          top: 2.5px  
        span:nth-of-type(2)
          display: block
          transform: rotate(45deg)
          width: 2px
          height: 14px
          background-color: #fff  
          position: relative
          top: -2.5px

      // 2つ目のボタンのマージントップ 
      &:nth-of-type(2)
        margin-top: 40px
コード

hatena19

2021/10/31 13:32

$accent-color の定義部分もコードに追加してください。あるいは、コンパイル後のCSSを提示したほうが回答がつきやすいでしょう。

行動規範の内容に同意します

回答1件

ベストアンサー

css
1      &:hover .contactButtonArrow span
2        background-color: $accent-color

上記の後で、span:nth-of-type(1) span:nth-of-type(2)に対して、background-color: #fff
を設定しています。CSSは詳細度が同じ場合、後の設定が優先されますので、これによって $accent-color が #fff で上書きされています。

対処法としては、!important を付加するか、

sass
1      &:hover .contactButtonArrow span
2        background-color: $accent-color !important

&:hover .contactButtonArrow span を span:nth-of-type(1) span:nth-of-type(2)の後ろに移動させるかですね。

sass
1      // >の矢印
2      .contactButtonArrow
3        position: absolute
4        right: 180px
5        span:nth-of-type(1)
6          display: block
7          transform: rotate(-45deg)
8          width: 2px
9          height: 14px
10          background-color: #fff
11          position: relative
12          top: 2.5px  
13        span:nth-of-type(2)
14          display: block
15          transform: rotate(45deg)
16          width: 2px
17          height: 14px
18          background-color: #fff  
19          position: relative
20          top: -2.5px
21      &:hover .contactButtonArrow span
22        background-color: pink