[css] CSS : 하나의 요소를 가리키면 여러 요소에 효과가 있습니까?

Program / 글쓴이

내 호버링 문제에 대한 방법을 찾고 있습니다.

<div class="section">

<div class="image"><img src="myImage.jpg" /></div>

<div class="layer">Lorem Ipsum</div>

</div>

이제 두 클래스, 이미지 및 레이어에 테두리가 있습니다. 둘 다 노멀과 호버의 색상이 다릅니다. 만들 방법이 있습니까? 그래서 레이어 클래스를 가리키면 레이어와 이미지 클래스가 테두리 색상을 가리키면 모두 활성화됩니까? 그리고 그 반대?

답변

이를 위해 JavaScript가 필요하지 않습니다.

일부 CSS는 그것을 할 것입니다. 다음은 그 예입니다.

<html>
  <style type="text/css">
    .section { background:#ccc; }
    .layer { background:#ddd; }
    .section:hover img { border:2px solid #333; }
    .section:hover .layer { border:2px solid #F90; }
  </style>
</head>
<body>
  <div class="section">
    <img src="myImage.jpg" />
    <div class="layer">Lorem Ipsum</div>
  </div>
</body>
</html>

스 니펫 확장

답변

이것은 Firefox와 Chrome 및 IE8에서 저에게 효과적이었습니다 …

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style type="text/css">
        div.section:hover div.image, div.section:hover div.layer {
            border: solid 1px red;
        }
        </style>
    </head>
    <body>
        <div class="section">
            <div class="image"><img src="myImage.jpg" /></div>
            <div class="layer">Lorem Ipsum</div>
        </div>
    </body>
</html>

… IE6에서도 이것을 테스트하고 싶을 수 있습니다 (거기에서 작동하는지 확실하지 않습니다).

답변

가장 좋은 방법은 두 div를 다른 div로 묶는 것입니다. 그런 다음 다음과 같은 방법으로 CSS로 만들 수 있습니다.

<html>
<head>
<style>
  div.both:hover .image { border: 1px solid blue }
  div.both:hover .layer { border: 1px solid blue }
</style>
</head>

<body>
<div class="section">

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

</div>
</body>
</html>

답변

이것은 달성하기 어렵지 않지만 자바 스크립트 onmouseover기능 을 사용해야합니다 . 의사 스크립트 :

<div class = "section">

<div class = "image"> <img src = "myImage.jpg"onmouseover = ". layer {border : 1px solid black;} .image {border : 1px solid black;}"/> </ div>

<div class = "layer"> Lorem Ipsum </ div>

</ div>

자신의 색상을 사용하십시오. mouseover 명령에서 javascript 함수를 참조 할 수도 있습니다.

답변

이 작업을 수행하려면 JavaScript를 사용해야합니다.

jQuery :

$(function(){
   $("#innerContainer").hover(
        function(){
            $("#innerContainer").css('border-color','#FFF');
            $("#outerContainer").css('border-color','#FFF');
        },
        function(){
            $("#innerContainer").css('border-color','#000');
            $("#outerContainer").css('border-color','#000');
        }
    );
});

그에 따라 값과 요소 ID를 조정하십시오. 🙂

답변

또는

.section:hover > div {
  background-color: #0CF;
}

참고 상위 요소 상태는 하위 요소 상태에만 영향을 줄 수 있으므로 다음을 사용할 수 있습니다. 

.image:hover + .layer {
  background-color: #0CF;
}
.image:hover {
  background-color: #0CF;
}

하지만 당신 은 사용할 수 없습니다

.layer:hover + .image {
  background-color: #0CF;
}

답변