CSS (Cascading Style Sheets)는 또는 XML (XHTML, SVG 포함) 형식. 다양한 일련의 서식 지정 방법을 통해 요소를 설명하는 데 주로 사용되는 스타일 시트 언어입니다. 방법 중 하나는 hovering이며이 기사에서는 다음과 같은 방식으로 CSS의 Hover를 이해합니다.

• CSS에서 Hover 란 무엇입니까?
• Hover는 어디에 사용됩니까?
• Hover는 무엇을합니까?
• 적합성
• 어떻게 작동합니까?
• 마우스 오버 배경 색상을 '빨간색'으로 변경
• 이미지에 호버 불투명도 만들기
• 이미지에 텍스트 오버레이 만들기

CSS에서 Hover 란 무엇입니까?

CSS hover는 마우스 포인터가 요소 위에있을 때 다른 요소의 스타일을 지정하는 데 사용되는 선택기 구성 요소입니다. 거의 모든 HTML 요소에서 사용할 수 있습니다. CSS의 호버 기능은 웹 페이지 디자인에서 상당히 중요합니다.

호버 구성 요소는 작고 효과적인 웹 디자인 프로그램에서 사용자 기본 설정에 따라 웹 페이지를 강조 표시, 인코딩 및 사용자 지정할 수 있습니다.

Hover는 어디에 사용됩니까?

호버 기능의 실행 가능성에 대한 가장 일반적인 예는 Flipkart 및 Amazon과 같은 주요 쇼핑 웹 사이트에서 강조 할 수 있습니다. 사용자가 이러한 전자 상거래 웹 사이트에서 제품을 가리키면 제품이 자동 확대 / 축소 호버 기능을 수행하도록 프로그래밍되어 고객에게 선택한 제품을 더 잘 볼 수 있습니다. 이 프로그래밍을 통해 웹 페이지는 단일 웹 페이지 디자인에서 관심 제품의 세부보기와 함께 전체 제품 범위의 간결한보기를 표시하도록 설계되었습니다.

Hover는 무엇을합니까?

호버는 사용자가 무한한 서식 기준으로 대상 요소를 사용자 정의 할 수있는 다기능 프로그래밍 도구입니다. 호버 기능에 대한 운영 노하우의 몇 가지 예는 다음과 같습니다.

자바에서 인스턴스 변수를 선언하는 방법

• 배경 / 글꼴 색상 변경
• 마우스 오버시 표시되는 숨겨진 텍스트 포함
• 이미지에 롤오버 효과 만들기
• 텍스트 / 이미지의 자동 확대 / 축소
• 이미지 불투명도 수정
• 텍스트 삽입
• 이미지 스왑
• Div. 호버
• 여러 다른 CSS 호버 형식화 작업.

호버 효과는 기본적으로 요소의 속성 값을 수정하여 명시된 텍스트 / 이미지 또는 각 요소에 애니메이션을 적용 할 수 있도록합니다. 웹 페이지 디자인에 CSS 호버 요소를 포함하면 일반 웹 페이지가 대화 형의 강력하고 기능이 뛰어난 웹 페이지로 변환됩니다. 이러한 웹 페이지 디자인은 사용자 친화적이고 포괄적입니다. 호버 디자인 웹 페이지는 더 높은 소비자의 호소력을 포함하며 잠재 고객의 고지를 유도합니다.

CSS의 Hover 호환성

호버 기능은 모든 주요 웹 브라우저와 호환됩니다. 그러나 터치 장치에서이 요소를 구현하는 것은 여전히 ​​어려운 작업입니다. CSS의 hover는 hover 기능을 지원하지 않는 장치에서 콘텐츠 접근성을 활성화합니다. 비지지 장치에서 활성화 된 호버 기능이 장치에서 멈출 수있는 것으로 관찰되었습니다.

결과적으로 중요한 콘텐츠의 중요한 표시는 서식 문제로 인해 차단됩니다. 한편으로는 CSS 프로그램의 hover 요소가 웹 페이지에 대한 높은 수준의 효율적인 개인화에 기여하는 반면, 모바일 장치에서의 작동 성은 매우 휴면 상태입니다. 정보 기술 세계가 실질적으로 모바일로 성장하는 상황을 감안하면 호버 기능이 기술 발전으로 쓸모 없게 될 위험이 있습니다. 따라서 터치 및 모바일 장치에서 작동하는 휴대용 임베디드 기능을 제작해야하는 필요성은 매우 중요합니다.

Hover는 CSS에서 어떻게 작동합니까?

활성 의사 클래스 스타일은 CSS 호버 형식화에서 지배적이며이 의사 클래스가 뒤 따르는 모든 후속 링크를 재정의합니다. 예를 들어, 가상 클래스에서“: 링크 : 방문 또는 : 활성 the : 호버 규칙은 링크 및 : 방문한 후 이전 : 적절한 경우 활성 : 호버 스타일링 후에 배치해야합니다. LVHA 순서 : : link, : hover, : visited 및 : active는 적절한 : hover 형식화 스타일에 대한 참조로 활용됩니다.

div {배경색 : 녹색 패딩 : 18px 디스플레이 : 없음} span : hover + div {디스플레이 : 블록}호버 테스트!마우스 오버시 숨겨진 코드 표시

위 코드에서 span 요소는 span : hover + div 요소를 활용하여 hover 및 div 요소를 병합하도록 수정되었습니다. 기본 방문 웹 페이지에 표시되는 범위 요소에는 '호버 테스트!'라는 텍스트가 표시됩니다. span 요소를 더 가리키면 div 요소 'Hidden code shows on hover'가 표시됩니다. 이 임베딩 형식은 이미지뿐만 아니라 텍스트에서도 작동합니다.

초보자를위한 Visual Studio 튜토리얼

마우스 오버 배경 색상을 '빨간색'으로 변경

p : hover, h1 : hover, a : hover {배경색 : 빨간색}
호버 레드
 
호버 레드
 
연결:
 
호버 테스트 빨간색 :
  Google com  
  노트 : 안녕하세요
자바에서 객체 배열을 만드는 방법
 

위의 코드는

,

과 요소를 추가하고 공통 호버 기능으로 통합합니다. 이 코드는 마우스 포인터가 텍스트 위에있을 때 텍스트 색상을 빨간색으로 변경하도록 설계되었습니다. h1 및 h2 구성 요소는 각각 'CSS : Hover Test Code'및 'Hover Red'를 표시합니다. 단락 요소 : Hover Test Red 및 앵커 태그 : google.com은 마우스 포인터를 해당 항목 위로 가져 가면 빨간색으로 강조 표시됩니다.

이미지에 호버 불투명도 만들기

.pic {width : 1900px height : 1900px opacity : 1 filter : alpha (opacity = 100) background : url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) no-repeat} .pic : hover {불투명도 : 0.2 필터 : alpha (opacity = 30)}

위의 CSS 프로그램은 호버링시 이미지의 불투명도 수정을 표시합니다. 이미지의 원래 불투명도는 하나 그러나 불투명도 호버 필터를 사용하면 0.2로 수정되었습니다. 이 코드는 hover 요소를 사용하여 이미지 및 / 또는 텍스트의 불투명도를 수정할 수 있음을 표시합니다.

이미지에 텍스트 오버레이 만들기

.pic {width : 4000px height : 2170px background : url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {width : 3400px height : 2170px background : #FFF opacity : 0} .pic : hover .text {opacity : 0.6 text-align : justify color : # 000000 font-size : 20px font-weight : 700 font-family : 'Times New Roman', Times, serif padding : 30px} 주황색은 섬유입니다. 풍부한 과일. 오렌지에 함유 된 항산화 제는 소화를 돕고 피부를 빛나게하며 노화 방지 요소로 작용합니다.

CSS hover의 텍스트 레이어링은 이미지 자체에 이미지의 설명 텍스트를 포함하는 효율적인 도구입니다. 이 도구는 제한된 웹 디자인 공간에서 휴면 공간을 차지하지 않고 이미지의 간결한 개요를 제공하는 데 도움이됩니다. 이 코드에서 배경 이미지는 마우스 포인터를 텍스트 위로 가져갈 때 표시되는 설명 텍스트와 함께 포함됩니다.

이것으로 CSS의 hover의 모든 중요한 측면을 마치고 웹 개발에서의 유용성을 강조합니다. 웹 페이지에 가져올 수있는 많은 특수 효과가 있습니다. 우리는 항상 애니메이션, 배경 이미지, 하이퍼 링크 등과 같은 다른 CSS 속성과 함께 호버 선택기의 다양한 조합을 시도하고 일부 예제에서 본 것처럼 그 잠재력을 탐색 할 수 있습니다. 마지막으로 CSS는 웹 페이지를 디자인하고 변형하는 가장 강력한 방법 중 하나이므로 웹 개발자가 동적 웹 페이지를 구축하기 위해이 기술을 습득해야합니다.

우리를 확인하십시오 강사 주도의 라이브 교육 및 실제 프로젝트 경험과 함께 제공됩니다. 이 교육을 통해 백엔드 및 프런트 엔드 웹 기술을 다루는 기술을 능숙하게 사용할 수 있습니다. 여기에는 웹 개발, jQuery, Angular, NodeJS, ExpressJS 및 MongoDB에 대한 교육이 포함됩니다.

질문이 있으십니까? “Hover in CSS”블로그의 댓글 섹션에 언급 해 주시면 다시 연락 드리겠습니다.