CSS Pseudo-classes
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus
Hover Selector
The :hover selector is used to select elements when you mouse over them.
- Tip: The :hover selector can be used on all elements, not only on links.
- Tip: Use the :link selector to style links to unvisited pages,
the:visited selector to style links to visited pages,
the :active selector to style the active link. - Note: :hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective!
- Hover외의 요소들 : https://www.w3schools.com/css/css_pseudo_classes.asp
EX)
/* unvisited link */ 방문하지 않은 링크는 초록색으로 표시
a:link {
color: green;
}
/* visited link */ 방문한 링크 파란색으로
a:visited {
color: blue;
}
/* mouse over link */ 모든 a 태그 링크에 마우스 오버하면
a:hover {
color: red;
}
/* selected link */ 현재 선택된 링크는 노란색으로
a:active {
color: yellow;
}
/*Make the <h1> element's color change to blue when hovered over */
h1:hover {
color:blue;
}
/*Make the <a> element's that have been visited gray */
a:vistied {
color: gray;
}
문제 : Select and style a <p>, <h1> and <a> element when you mouse over it:
p:hover, h1:hover, a:hover {
background-color: yellow;
}
문제 : 두개의 링크가 있는데 그 중 하나만 hover효과 주고 싶으면,
->효과를 적용할 링크에 Class값 부여.
실습 : https://www.w3schools.com/css/tryit.asp?filename=trycss_pseudo-class
Question
ID는 안되나? (ID를 써도 되는데 그 때는 a.highlight대신 #highlight 만 써주면 됨)
적용시킬 링크가 한페이지에 한개라면 ID(#)로 쓰고 만약 적용시킬 링크가 더 생기면 class(.)로 해주면 됨.
For example, if I am sure that I will have one header. I will use #header. If not, I go for .header
참고링크:
https://www.w3schools.com/cssref/sel_hover.asp
http://thrillfighter.tistory.com/463
