CSS를 사용하여 마우스 오버 시 형제 요소의 색상 조작
HTML 요소의 모양을 수정하는 한 가지 방법은 CSS를 사용하는 것입니다. 이 기사에서는 형제 요소 위로 마우스를 가져갈 때 색상을 변경하는 특정 요청을 살펴보겠습니다.
원래 문제 설명
다음 HTML 코드가 제공됩니다.
<h1>Heading</h1> <a class="button" href="#">-</a>
우리의 목표는
형제 요소 상호 작용
안타깝게도 CSS 형제 선택자는 앞에 있는 요소에 영향을 미칠 수 없습니다. 위의 예에서
컨테이너 기반 솔루션
한 가지 해결 방법은 상위 컨테이너 div를 도입하는 것입니다. ID 사용:
<div>
그러나 이는 다음과 같은 직접적인 연결을 제공하지 않습니다. 요소와 element.
대체 접근 방식
이 제한을 극복하려면 CSS를 사용하여 "다음 형제"(지정된 요소 뒤에 오는 요소)를 타겟팅하는 것을 고려해 보세요. 아래 예는 이를 달성하는 방법을 보여줍니다.
h1 {
color: #4fa04f;
}
h1 + a {
color: #a04f4f;
}
h1:hover + a {
color: #4f4fd0;
}이렇게 하면 기본 상태에서는 요소가 #a04f4f로 변경되고 요소.
위 내용은 CSS를 사용하여 마우스 오버 시 형제 요소의 색상을 어떻게 변경할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
