Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS Hover:방법 가이드

CSS :hover 선택기는 커서를 해당 요소 위로 가져가면 요소를 선택합니다. 예를 들어 :hover를 사용하여 링크 위로 마우스를 가져갈 때 링크의 색상을 변경할 수 있습니다.

사용자가 해당 요소 위로 마우스를 가져가면 웹 페이지의 요소에 적용되는 스타일을 전환할 수 있습니다.

이것이 CSS :hover 선택기가 들어오는 곳입니다. :hover 선택기를 사용하면 요소 위에 마우스를 놓을 때 요소를 선택할 수 있습니다. 이렇게 하면 사용자가 요소 위로 마우스를 가져갈 때 스타일을 적용할 수 있습니다.

이 튜토리얼에서는 CSS의 선택기 기본 사항과 CSS :hover 선택기를 사용하는 방법을 예제와 함께 설명합니다. 이 튜토리얼이 끝나면 :hover를 사용하여 스타일을 적용해야 하는 요소를 선택하는 데 전문가가 될 것입니다.

CSS 선택기

CSS에서 선택기는 웹 페이지에서 스타일을 적용하려는 HTML 요소를 선택하는 데 사용됩니다. 선택기를 사용하면 id, 클래스, 그룹 또는 속성에 따라 요소를 선택할 수 있으므로 특정 요소에 특정 스타일을 적용할 수 있습니다.

예를 들어, HTML 문서의 모든

태그가 핫 핑크 배경으로 나타나도록 하고 싶다고 가정합니다. 다음 코드를 사용하여 수행할 수 있습니다.

h1 {
	background-color: hotpink;
}

이 코드에서는 웹 페이지의 모든

태그를 선택하는 데 사용되는

선택기를 사용합니다. 그런 다음 중괄호로 묶고 웹 페이지의

태그에 적용할 스타일을 지정합니다.

CSS :마우스 오버 선택기

CSS :hover 선택기는 요소 위에 마우스를 가져가면 요소를 선택합니다. :hover는 모든 CSS 요소에 사용할 수 있지만 일반적으로 링크에 사용됩니다. :hover는 링크를 위한 a:hover와 같이 선택하려는 요소의 이름 뒤에 지정됩니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

:hover 선택기를 사용할 수 있는 다양한 시나리오가 있습니다. 다음은 선택기의 몇 가지 잠재적 사용 사례입니다.

  • 사용자가 텍스트 줄 위로 마우스를 가져갈 때 텍스트 색상 변경
  • 사용자가 이미지 위에 마우스를 올려 놓으면 이미지 크기가 변경됩니다.
  • 사용자가 버튼 위에 마우스를 놓을 때 버튼의 색상 변경

이러한 모든 사용 사례에서 사용자가 커서를 요소 위로 가져가면 특정 스타일이 적용됩니다.

:hover 선택기의 구문은 다음과 같습니다.

selector:hover {
	// CSS rules
}

다음은 :hover 구문의 주요 구성 요소입니다.

  • 선택기 :hover 선택기가 적용될 요소의 범위입니다. 따라서 사용자가

    요소 위로 마우스를 가져갈 때마다 :hover 효과가 트리거되도록 하려면 h3을 지정합니다. .

  • :호버 CSS 규칙의 스타일은 사용자가 특정 요소 위로 마우스를 가져가는 경우에만 적용되어야 한다고 브라우저에 지시합니다. 이 요소는 선택기입니다. 재산.
  • CSS 규칙 사용자가 선택기에 의해 정의된 요소 위로 마우스를 가져갈 때 적용되어야 하는 스타일입니다. . 예를 들어, 텍스트의 글꼴 크기나
    태그의 배경색을 지정할 수 있습니다. 또는 필드의 경계 반경을 지정할 수 있습니다.

웹 개발자가 CSS :hover 선택기를 사용하는 방법을 보여주기 위해 몇 가지 예를 살펴보겠습니다.

:hover CSS 예제

:hover 선택기를 사용할 수 있는 방법에는 여러 가지가 있습니다. 아래에서 :hover 선택기가 유용할 수 있는 몇 가지 일반적인 시나리오를 살펴보겠습니다.

CSS 호버 효과:링크 색상 변경

:hover 선택기를 사용하면 사용자가 링크 위로 마우스를 가져갈 때 링크의 색상을 변경할 수 있습니다.

Career Karma 홈페이지 텍스트가 포함된 링크를 디자인한다고 가정해 보겠습니다. 사용자를 Career Karma 사이트로 보냅니다. 이 링크는 밝은 녹색 색상으로 표시되도록 설정되어 있습니다. 웹페이지에 있습니다.

링크를 주황색으로 변경하고 싶습니다. 사용자가 커서로 링크 위로 마우스를 가져갈 때 이 효과를 만들기 위해 다음 코드를 사용할 수 있습니다.

<html>

<a href="https://careerkarma.com">Career Karma homepage</a>
<html>
  
<style>

a {
	color: lightgreen;
}

a:hover {
	color: orange;
}
<style>

CSS Hover:방법 가이드 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

코드를 분석해 보겠습니다.

HTML 파일에서 태그를 사용하여 Career Karma 홈페이지에 대한 링크를 정의합니다. 그런 다음 CSS 코드에서 두 가지 규칙을 정의합니다.

첫 번째 규칙은 웹 페이지의 모든 HTML 태그에 적용됩니다. 우리의 규칙은 모든 태그의 텍스트 색상을 밝은 녹색으로 설정합니다. 색상 사용 재산.

두 번째 규칙은 사용자가 태그 위로 마우스를 가져갈 때 웹 페이지의 태그 색상을 주황색으로 변경합니다. 이것은 :hover 선택기를 사용하여 수행됩니다.

따라서 사용자가 Career Karma 홈페이지 텍스트 위로 마우스를 가져가면 , 링크 색상이 주황색으로 변경됩니다.

CSS 호버 효과:텍스트 블록 표시

:hover 선택기를 사용하여 사용자가 텍스트 줄 위로 마우스를 가져갈 때 텍스트 블록을 표시할 수도 있습니다.

Career Karma 웹사이트의 자주 묻는 질문 페이지를 디자인한다고 가정해 보겠습니다. 사용자가 질문 위로 마우스를 가져가면 질문에 대한 답변이 포함된 텍스트 블록이 나타납니다. 다음 코드를 사용하여 예제 질문을 만들 수 있습니다.

<html>

<span>What is Career Karma?</span>
<div>Career Karma is a community of peers, mentors, and coaches that will help you land a dream career in tech.</div>
<html>
  
<style>

div {
	display: none;
	background-color: orange;
	padding: 10px;
}

span:hover + div {
	display: block;
}
<style>

CSS Hover:방법 가이드 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

태그를 사용하여 "Career Karma란 무엇입니까?"라는 질문을 만들었습니다. 우리 웹 페이지에 나타납니다. 그런 다음 질문에 대한 답변이 포함된

태그를 사용했습니다.

CSS 파일에서

태그에 다음 스타일을 사용했습니다.

  • display:없음,
    태그를 보이지 않게 합니다.
  • background-color:주황색,
    태그의 배경색을 주황색으로 설정합니다.
  • CSS 패딩:10px,
    태그의 내용과 테두리 사이에 10px 간격을 만듭니다.

그런 다음 span:hover + div 선택기를 사용하여 규칙을 정의했습니다. 이 규칙은 디스플레이의 스타일을 변경합니다. 차단하는

태그의 규칙 , 나타나게 합니다. 따라서 사용자가 태그(span:hover로 표시됨) 위로 마우스를 가져가면
태그가 표시됩니다.

이미지 변경:CSS On Hover

:hover 선택기를 사용할 수 있는 또 다른 시나리오는 웹 페이지에서 이미지를 변경하는 것입니다. 사용자가 컴퓨터 커서로 이미지 위로 마우스를 가져가면 이미지가 변경됩니다.

지역 커피숍의 웹사이트를 디자인한다고 가정해 보겠습니다. 사용자가 정보에서 커피의 스톡 이미지 위로 마우스를 가져가면 페이지에서 새 이미지가 기존 이미지를 대체해야 합니다. 새 이미지는 카페의 스톡 이미지여야 합니다.

다음 코드를 사용하여 이미지 호버 효과를 얻을 수 있습니다.

<html>

<img height="750" width="1250" class="aboutImage" />
<html>
  
<style>

.aboutImage {
	background: url("https://images.unsplash.com/photo-1497515114629-f71d768fd07c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1062&q=80");
}

.aboutImage:hover {
	background: url("https://images.unsplash.com/photo-1525610553991-2bede1a236e2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
}
<style>

CSS Hover:방법 가이드 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

높이 750픽셀, 너비 1250픽셀의 이미지를 생성하는 태그를 정의했습니다. 태그에 할당된 클래스는 aboutImage라고 합니다. .

CSS 파일에서 두 가지 규칙을 선언했습니다.

첫 번째 규칙은 클래스 이름이 .aboutImage인 요소에 표시될 배경 이미지를 설정합니다. 배경 이미지로 커피의 스톡 사진을 사용합니다.

두 번째 규칙인 .aboutImage:hover는 사용자가 가리키고 있는 .aboutImage 클래스가 있는 요소의 배경 이미지를 변경합니다. 새롭게 등장하는 이미지는 카페 스톡 이미지입니다.

:Hover 선택기의 다른 용도

앞에서 논의한 것처럼 :hover 선택기가 유용할 수 있는 여러 시나리오가 있습니다. 작동 중인 :hover 선택기의 더 많은 예를 찾고 있다면 다른 Career Karma 튜토리얼을 보는 것이 좋습니다.

  • CSS 전환:사용자가 웹페이지의 요소 위로 마우스를 가져갈 때 표시되는 전환을 만드는 방법에 대한 안내입니다.
  • CSS 탐색 모음:CSS를 사용하여 탐색 모음을 만드는 방법에 대한 안내입니다.
  • CSS 드롭다운 메뉴:CSS를 사용하여 드롭다운 메뉴를 만드는 방법에 대한 안내입니다.

호버 선택기는 버튼 호버 효과를 만드는 데에도 사용됩니다. 이러한 효과는 버튼의 모양을 변경하고 호버 애니메이션을 트리거합니다.

다른 선택기에 대해 자세히 알아보기 위해 읽을 수 있는 CSS 선택기에 대한 가이드도 있습니다.

결론

CSS :hover 선택기를 사용하면 사용자가 커서로 요소 위로 마우스를 가져갈 때 요소를 선택할 수 있습니다. 요소가 선택되면 새로운 스타일 세트를 적용할 수 있습니다. 이는 사용자가 커서로 요소 위로 마우스를 가져가는 것을 멈출 때까지 표시됩니다.

이 자습서에서는 CSS 선택기의 기본 사항과 :hover 선택기를 사용하는 방법을 예제와 함께 설명했습니다. 이제 CSS 전문가처럼 :hover 선택기를 사용할 준비가 되었습니다!

최고의 CSS 학습 리소스, 과정 및 책에 대한 조언은 CSS 학습 방법 가이드를 확인하세요.