使用 :link、:visited、:hover、:active 設定 Anchor 視覺 | 次世代 Hugo

<a> 為最常用的 HTML 之一，可透過 :link、:visited、:hover 與: :active 設定在不同狀態下 Anchor 視覺效果。

Version

CSS 3

Anchor

設定 <a> 各種視覺效果。

<template>
  <a class="my-blog" href="#">My Blog</a>
</template>

<style scoped>
.my-blog {
  text-decoration: none;
}

.my-blog:link {
  color: #faebd7;
}

.my-blog:visited {
  color: #0000ff;
}

.my-blog:hover {
  color:#ff0000;
  text-decoration: underline;
}

.my-blog:active {
  color: #0000ff;
}
</style>

第 2 行

<a class="my-blog" href="#">My Blog</a>

使用 <a> 定義 anchor。

10 行

.my-blog:link {
  color: #faebd7;
}

• :link：設定 未曾經拜訪過 URL 的視覺

14 行

.my-blog:visited {
  color: #0000ff;
}

• :visited：設定 曾經拜訪過 URL 的視覺

18 行

.my-blog:hover {
  color:#ff0000;
  text-decoration: underline;
}

• :hover：設定當滑鼠 hover 過的視覺

:hover 必須寫在 :link 與 :visited 之後

23 行

.my-blog:active {
  color: #0000ff;
}

• :active：當滑鼠點擊的視覺

:active 必須寫在 :hover 之後

Conclusion

• :link、:visited、:hover 與 :active 必須依照順序寫才會發揮正確效果

Reference

W3schools.com, Anchor Pseudo-classes