제로하우스

[CSS] :hover 마우스 올린 태그 선택 본문

HTML&CSS

[CSS] :hover 마우스 올린 태그 선택

송제로투 2022. 9. 5. 20:14

:hover

:hover는 마우스를 올린 태그나 속성 등을 선택한다. 이와 같이 :(콜론)이 붙은 요소는 가상 클래스라고 부른다.

 

마우스를 올렸을 때 텍스트 색 변하게 하기

:hover를 활용해 마우스를 올렸을 때 텍스트 색이 변하도록 할 수 있다. 아래의 예시는 <a> 태그에 마우스를 올렸을 때 텍스트의 색상이 파란색으로 변하도록 하는 CSS 코드이다.

<html>
  <head>
    <style>
      a:hover {
          color: blue;
      }
    </style>
  </head>
  <body>
    <a href="https://www.wikipedia.org">위키백과</a>
  </body>
</html>
저작자표시 비영리 변경금지

'HTML&CSS' 카테고리의 다른 글

[CSS] CSS 변수 사용하기  (0) 2022.09.06
[HTML/CSS] 텍스트 드래그 방지  (0) 2022.08.22
[CSS] Footer 만들기  (0) 2022.08.19
[HTML/CSS] 3단 레이아웃 만들기  (0) 2022.04.28
Comments