hoverをつけてつけてみる

アイコンにカーソルを当てたら、色を変える

地味に苦戦した。Twitterの様に作成したい

完成

こんな感じ。 地味に作るのに苦労しました

html

 <ul className="side-links">
    <li><i className="fa fa-search"></i></li>
    <li><i className="fa fa-search"></i></li>
    <li><i className="fa fa-search"></i></li>
    <li><i className="fa fa-search"></i></li>
    <li><i className="fa fa-search"></i></li>
    <li><i className="fa fa-search"></i></li>
  </ul>

ul.side-links{
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 10px;
  top: 30px;

## liタグに横幅とpaddingを持たせる
## hoverにはプラスアルファで 背景色をつける
  li {
    width: 40px;
    height: 40px;
    padding: 9px 4px;
    &:hover {
      width: 40px;
      height: 40px;
      padding: 9px 4px;
      opacity: 0.7; # このopacityはアイコンの色も薄くしてしまうので rgba?だっけかな。本来はそれを使った方が良い
      background-color: skyblue;
      border-radius: 50px;    
    }
  }
}

実装ポイント

• 変更前と変更後で縦幅は一致させる
• hoverした時の中の要素は、paddingで調整する