CSS를 사용하여 여러 요소에 호버 효과를 동시에 적용하려면 어떻게 해야 합니까?

요소 위에 마우스를 올리면 CSS의 여러 요소에 효과

HTML 레이아웃에서 요소 위에 마우스를 올리면 트리거되는 시나리오가 발생할 수 있습니다. 여러 관련 요소에 미치는 영향. 다음 HTML 코드를 고려해 보세요.

<div class="section">
  <div class="image"><img src="myImage.jpg" /></div>
  <div class="layer">Lorem Ipsum</div>
</div>

"image" 및 "layer" 클래스 모두 일반 상태와 마우스 오버 상태에 대해 서로 다른 색상의 테두리가 있습니다. 목표는 "레이어" 요소 위로 마우스를 가져갈 때 두 요소 모두에서 테두리 색상이 변경되도록 하는 것입니다.

CSS 솔루션:

JavaScript 없이 이 효과 달성 CSS를 사용하면 가능합니다. 여기에 예:

HTML:

<div class="section">
    <img src="myImage.jpg" />
    <div class="layer">Lorem Ipsum</div>
</div>

CSS:

.section {
    background: #ccc;
}

.layer {
    background: #ddd;
}

.section:hover img {
    border: 2px solid #333;
}

.section:hover .layer {
    border: 2px solid #F90;
}

설명:

• ".section:hover img" 선택기는 ".section" 요소 위에 마우스를 올렸을 때 그 안에 있는 "img" 요소에 #333 색상의 2px 실선 테두리가 있어야 함을 지정합니다.
• 마찬가지로 " .section:hover .layer" 선택기는 ".section" 내의 ".layer" 요소를 대상으로 하며 테두리 색상을 #F90으로 변경합니다. hover.

이 CSS를 사용하면 "레이어" 요소 위로 마우스를 가져가면 "이미지" 및 "레이어" 요소 모두의 테두리 색상이 업데이트되어 스크립팅 없이 원하는 효과를 생성할 수 있습니다.

위 내용은 CSS를 사용하여 여러 요소에 호버 효과를 동시에 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!