<P>hover 效果，圖形改變</P>
<div class="box"> </div>

<p>hover 效果，navbar 選單效果</p>

<div class="navbar">
  <div class="item">選單 1</div>
  <div class="item">選單 2</div>
  <div class="item">選單 3</div>
  <div class="item">選單 4</div>
</div>

<p>hover 效果，按鈕</p>
<button class="btn">滑鼠碰到變色</button>

body {
  font-family: Arial, Helvetica, sans-serif, "微軟正黑體";
}
$primary: #ff8a65;
$hover: #f0f;

.box {
  width: 100px;
  height: 100px;
  background-color: $primary;
  border-radius: 6px;
  //改變的時間
  transition: all 1.5s;
  &:hover {
    width: 200px;
    background-color: $hover;
  }
}

.navbar {
  background-color: $primary;
  display: flex;
  justify-content: flex-end;
  width: 342px;
  .item {
    color: #fff;
    padding: 20px;
    transition: all 0.3s;
    cursor: pointer;
    &:hover {
      background-color: $hover;
    }
  }
}

.btn {
  background-color: $primary;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  outline: none;
  font-size: 16px;
  transition: all 0.6s;
  &:hover {
    background-color: $hover;
  }
}