HTML- 12강 :hover (마우스오버시 효과)

2023. 8. 3. 01:37·HTML
728x90
반응형
SMALL
🟰hover(마우스가 해당 요소 위를 지나갈때)


☀️hover효과를 통해 마우스가 해당 요소를 지나갈 때 강조 효과를 줄 수 있다.
☀️background-color, color-font, visibility 등 다양한 요소를 활용하여 강조효과를 줄 수 있다.
☀️transition-duration으로 해당 효과가 보여지는 시간을 지정할 수 있다.

다양한 효과를 주석과 함께 적어놨으니 직접 보면서 알아보자!



See the Pen Untitled by 이선로 (@ttxvrsis-the-animator) on CodePen.



hover를 통해 드랍메뉴 또한 구현할 수 있다.
드랍메뉴는 다음 강의에 올리도록 하겠다!




728x90
반응형
SMALL

'HTML' 카테고리의 다른 글

HTML14강 드랍메뉴 만들기(HTML코드 첨부)  (0) 2023.08.06
HTML13강 - position 속성  (0) 2023.08.04
HTML11강 - flex요소 (세로가 아닌 가로로배치하기)  (0) 2023.08.02
HTML 10강 - border(테두리 설정)  (0) 2023.08.01
HTML 9강 - 선택자(tag,id,class,자손선택자 등) (예시 포함)  (0) 2023.07.31
'HTML' 카테고리의 다른 글
  • HTML14강 드랍메뉴 만들기(HTML코드 첨부)
  • HTML13강 - position 속성
  • HTML11강 - flex요소 (세로가 아닌 가로로배치하기)
  • HTML 10강 - border(테두리 설정)
공부하고 기억하는 공간
공부하고 기억하는 공간
IT 비전공자로 시작하여 훌륭한 개발자가 되기 위해 공부하고 있는 공간입니다. 틀린 내용이나 부족한 부분이 있으면 댓글로 알려주세요 바로 수정하겠습니다.
    250x250
  • 공부하고 기억하는 공간
    IT - railroad
    공부하고 기억하는 공간
  • 전체
    오늘
    어제
    • 분류 전체보기 (325)
      • 면접 준비 (22)
        • OS (6)
        • Spring Security (0)
        • Java (3)
        • DB (11)
        • Network (3)
      • ElasticSearch (2)
      • Kafka (4)
      • Spring (22)
        • Spring Cloud (7)
        • Security6 (5)
        • JPA (12)
        • 프로젝트 리팩토링 회고록 (4)
        • Logging (8)
        • Batch (2)
      • Redis (17)
        • Redis 개념 (8)
        • Redis 채팅 (5)
        • Redis 읽기쓰기 전략 (1)
      • AWS (11)
      • 리눅스 (29)
        • 리눅스 마스터 2급 (5)
        • 네트워크(기초) (7)
        • 리눅스의 이해 (6)
        • 리눅스의 설치 (2)
        • 리눅스 운영 및 관리 (6)
      • JAVA-기초 (16)
        • JAVA기본 (11)
        • Design Pattern (5)
      • JSP (27)
        • JSP 기본 개념 (10)
        • JSP (1)
      • SQL (1)
      • TIL (36)
      • 문제 풀이 (2)
        • Programmers (9)
        • 백준 문제풀이 (28)
      • JavaScript (10)
      • HTML (17)
      • Ngrinder (1)
        • Ngrinder 문서 정리 (1)
  • 블로그 메뉴

    • 링크

    • 공지사항

    • 인기 글

    • 태그

      jsp기초
      java
      자바 면접질문
      자바
      spring redis
      springsecurity
      리눅스
      redis 채팅
      리눅스마스터2급정리
      JS
      백준
      리눅스마스터2급
      Til
      자바 알고리즘
      HTML
      Spring Data Redis
      레디스
      JavaScript
      자바기초
      Spring
      프로그래머스
      자바 반복문
      Springframework
      자바 면접
      CSS
      스프링프레임워크
      jsp request
      JSP
      redis
      자바스크립트
    • 최근 댓글

    • 최근 글

    • hELLO· Designed By정상우.v4.10.3
    공부하고 기억하는 공간
    HTML- 12강 :hover (마우스오버시 효과)
    상단으로

    티스토리툴바