CSS-用hover選擇器增加滑鼠互動效果

原理

• 先設定元件的初始樣式
• 再用css選擇器，添加:hover，並定義滑鼠移過的樣式

實作

.card{
    color: #6C757D ;
    background-color: #ffffff;
}
.card:hover{
    color: #fff;
    background-color: #f2ac34;
}

成果

My Project-LonelyPlanet-Author section

補充

• hover經常被用在<a>標籤上

  a:hover{ 
      background-color:yellow;
  }

• 其他a標籤的連結效果

  a:link    {color:blue;}
  a:visited {color:blue;}
  a:hover   {color:red;}
  a:active  {color:yellow;}