56250


<http://uu-hokkaido.cedars.jp/renewal.shtml>

こちらのメインビジュアルの北海道の地図の上のピンクの丸をクリックすると、  
濃いピンクの色が、マウスを丸から移動しても維持し続けるようにするにはどうすればよいでしょうか？

今は、:hoverにしていますが、  
:active  
:focus  
:focus-within  
:visited

全部試しましたが上手くいきませんでした。

お分かりになる方いましたら、ご教授願います。


CC BY-SA 4.0
2019-06-30T05:35:00.093
56242
2019-06-30T08:14:07.657
2019-06-30T07:41:16.873
34913
34913
question
html css
クリックしたら、色の変化を維持したい。


`:focus` 擬似クラスによって、フォーカスを持っている要素に対して装飾を行うことが出来ます。

ここで、要素がフォーカス可能な領域となるためには、
**以下の条件を満たす必要があります**[[1]](https://html.spec.whatwg.org/multipage/interaction.html#data-
model)。実際は別の条件によってもフォーカス可能な要素となり得ますが、今回は紹介しません。

  * 該当の要素にタブインデックスフォーカスフラグがセットされている
  * 該当の要素がレンダリングされているか、関連するキャンバスフォールバックコンテンツとして使用されている
  * 要素が無効化されていない
  * 要素が不活性でない

> ### § 6.4.2 Data
> model[[1]](https://html.spec.whatwg.org/multipage/interaction.html#data-
> model)
>
>   * Focusable area:  
>  Elements that have their tabindex focus flag set, that are not actually
> disabled, that are not expressly inert, and that are either being rendered
> or being used as relevant canvas fallback content.
>   * DOM anchor  
>  The element itself.
>

* * *

そして、今回の「北海道の地図の上のピンクの丸」は、これらの条件のうち、 **最初の 1 つ以外を満たしています**
。そこで、「北海道の地図の上のピンクの丸」を表現する `div` 要素に対して **`tabindex`
属性を付与する**ことで、フォーカス擬似要素による装飾を行うことが出来ます。

[code]

    li {
      list-style: none;
      margin-top: 5px;
    }
    
    li:first-of-type {
      margin-top: 0;
    }
    
    div {
      width: 50px;
      height: 50px;
      background: rgba(238, 156, 184, 0.48);
    }
    
    div:focus {
      background: rgba(233, 30, 99, 0.71);
      /* 最初と最後の div 要素は、フォーカス可能領域としての条件を満たしていないため、フォーカス出来ない */
    }
[/code]

[code]

    <ul>
      <li>
        <div role="button"></div>
      </li>
      <li>
        <div role="button" tabindex="-1"></div>
      </li>
      <li>
        <div role="button" tabindex="-1"></div>
      </li>
      <li>
        <div role="button" tabindex="-1"></div>
      </li>
      <li>
        <div role="button"></div>
      </li>
    </ul>
[/code]


CC BY-SA 4.0
2019-06-30T08:14:07.657
56250
2019-06-30T08:14:07.657
2020-06-17T08:14:45.997
-1
32986
56242
answer