CSS3 표시 숨기기
CSS3는 최신 CSS 사양으로 웹 디자인 효과를 더욱 다채롭게 만들어줍니다. 일반적으로 사용되는 기능 중 하나는 표시 및 숨기기입니다.
CSS3에서 표시 및 숨기기를 구현하는 방법에는 여러 가지가 있으며, 아래에 소개되어 있습니다.
1. 표시 속성을 사용하세요.
표시 속성은 다음을 포함하여 요소의 표시 상태를 제어할 수 있습니다.
- none: 페이지에서 공간을 차지하지 않고 요소를 숨깁니다.
- block: 요소를 블록 요소로 표시합니다.
- inline: 요소를 인라인 요소로 표시합니다.
- inline-block: 요소를 인라인 블록 요소로 표시합니다.
display 속성의 값을 변경하면 요소를 표시하거나 숨길 수 있습니다. 예를 들어, 다음 코드는 요소 위로 마우스를 가져갈 때 이미지를 표시합니다.
img { display: none; } div:hover img { display: block; }
위 코드에서 이미지의 초기 표시 속성은 없음, 즉 숨겨진 상태로 설정됩니다. 그런 다음 div:hover img를 통해 div 요소 위로 마우스를 가져갈 때 이미지의 표시 속성을 block으로 설정하여 표시합니다.
2. 가시성 속성 사용
가시성 속성은 요소의 가시성을 제어합니다. 표시 속성과 달리 가시성 속성을 숨김으로 설정해도 페이지의 공간을 차지합니다. 해당 값은 다음과 같습니다.
- visible: 요소가 표시됩니다.
- hidden: 요소는 보이지 않지만 여전히 페이지 공간을 차지합니다.
다음 코드는 요소 위로 마우스를 가져갈 때 텍스트 콘텐츠 표시를 구현합니다.
div { visibility: hidden; } div:hover { visibility: visible; }
위 코드에서 div 요소의 초기 가시성 속성은 숨김, 즉 숨김으로 설정됩니다. 그런 다음 div:hover를 통해 마우스를 div 요소 위로 가져가면 해당 요소의 가시성 속성이 visible로 설정되어 표시됩니다.
3. 불투명도 속성을 사용하세요.
불투명도 속성은 요소의 투명도를 제어합니다. 값 범위는 0~1이며, 0은 완전히 투명함을 의미하고 1은 완전히 불투명함을 의미합니다. 요소의 불투명도 속성 값을 변경하면 해당 요소를 표시하거나 숨길 수 있습니다. 예를 들어, 다음 코드는 마우스를 요소 위로 가져갈 때 요소가 페이드 인 및 페이드 아웃되는 효과를 구현합니다.
div { opacity: 0; transition: opacity .5s ease-in-out; } div:hover { opacity: 1; }
위 코드에서 div 요소의 초기 불투명도 속성은 완전히 투명한 0으로 설정됩니다. . 그런 다음 div:hover를 통해 마우스가 div 요소 위에 있을 때 요소의 불투명도 속성을 완전히 불투명한 1로 설정합니다. 동시에 페이드인 및 페이드아웃 효과를 얻기 위해 전환 속성이 추가됩니다.
위 내용은 CSS3를 사용하여 표시하고 숨기는 여러 가지 방법으로, 필요에 따라 선택할 수 있습니다. CSS3는 일부 이전 브라우저와 호환되지 않는다는 점은 주목할 가치가 있으므로 코드를 작성할 때 호환성 문제를 고려해야 합니다.
위 내용은 CSS3 표시 숨기기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











React는 JSX와 HTML을 결합하여 사용자 경험을 향상시킵니다. 1) JSX는 개발을보다 직관적으로 만들기 위해 HTML을 포함시킨다. 2) 가상 DOM 메커니즘은 성능을 최적화하고 DOM 운영을 줄입니다. 3) 유지 보수성을 향상시키기위한 구성 요소 기반 관리 UI. 4) 상태 관리 및 이벤트 처리는 상호 작용을 향상시킵니다.

기사는 Connect ()를 사용하여 React 구성 요소를 Redux Store에 연결하고 MapStateToprops, MapDispatchtoprops 및 성능 영향을 설명합니다.

이 기사에서는 & lt; route & gt; 경로, 구성 요소, 렌더링, 어린이, 정확한 및 중첩 라우팅과 같은 소품을 덮는 구성 요소.

VUE 2의 반응성 시스템은 직접 어레이 인덱스 설정, 길이 수정 및 객체 속성 추가/삭제로 어려움을 겪습니다. 개발자는 vue의 돌연변이 방법과 vue.set ()을 사용하여 반응성을 보장 할 수 있습니다.

Redux Reducers는 작업에 따라 응용 프로그램의 상태를 업데이트하여 예측 가능성과 불변성을 보장하는 순수한 기능입니다.

이 기사는 Redux Thunk를 사용한 비동기 동작을 포함하여 Redux 동작, 구조 및 파견 방법에 대해 설명합니다. 확장 가능하고 유지 관리 가능한 응용 프로그램을 유지하기 위해 작업 유형을 관리하기위한 모범 사례를 강조합니다.

TypeScript는 유형 안전성을 제공하고 코드 품질을 향상 시키며 IDE 지원을 향상시켜 오류를 줄이고 유지 관리를 향상시켜 RECT 개발을 향상시킵니다.

반응 구성 요소는 함수 또는 클래스로 정의 할 수 있으며 UI 로직을 캡슐화하고 소품을 통해 입력 데이터를 수락합니다. 1) 구성 요소 정의 : 기능 또는 클래스를 사용하여 반응 요소를 반환합니다. 2) 렌더링 구성 요소 : 반응 호출 렌더 메소드 또는 기능 구성 요소를 실행합니다. 3) 멀티플렉싱 구성 요소 : 소품을 통해 데이터를 전달하여 복잡한 UI를 구축합니다. 구성 요소의 수명주기 접근 방식을 통해 다른 단계에서 논리를 실행하여 개발 효율성 및 코드 유지 관리 가능성을 향상시킬 수 있습니다.
