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

84

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

<div class="section">

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

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

</div>

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

css xhtml hover

— Marko
소스

191

이를 위해 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>

스 니펫 확장

— 코리 매튜
소스

12

좋아요, 여기 우승자입니다 !! :) 내가 뭔가를 가지고 있다면, 나는 다른 요소를 계속할 수 있다는 것을 몰랐습니다! : (뭔가를해야만 호버 .second) .. 매일 당신은 .. 감사합니다 X10 새로운 것을 배울

— 마르코

6

두 div (마우스 오버 할 div와 표시 할 div)가 동일한 직계 상위 div 내에 있지 않으면 어떻게됩니까?

— bikashg

3

필요한만큼 구조를 올라가거나 두 항목의 부모가 될 항목을 추가 할 수 있습니다. 하지만 때로는 공통점이 없다면 자바 스크립트에 의지해야합니다.

— corymathews

2

같은 div의 다른 자식 요소를 가리킬 때 div의 자식 요소 하나를 변경하려면 어떻게해야합니까?

— Cos

감사! 나는 자바 스크립트를 사용하고 있었고이 CSS는 더 잘 작동했습니다. 때로는 우리가 생각하는 것보다 쉽습니다.

— yanike 2012

11

이것은 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에서도 이것을 테스트하고 싶을 수 있습니다 (거기에서 작동하는지 확실하지 않습니다).

— 스티브 워담
소스

실제로 IE8에서 작동 할 수 있습니다. Doctype을 추가하면 차이가 생겼습니다. 그래서 거기에 순수한 CSS 솔루션이 있습니다. ;)

— Steve Wortham

10

가장 좋은 방법은 두 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>

— Viliam
소스

8

이것은 달성하기 어렵지 않지만 자바 스크립트 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 함수를 참조 할 수도 있습니다.

— Eykanal
소스

1

다른 예로 요소 1 대신 클래스 CSS 변경을 사용하는 경우 +1.

— DVK

이것도 작동합니다, 감사합니다! 인라인 코딩을 최대한 피하려고합니다.;)

— Marko

3

이 작업을 수행하려면 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를 조정하십시오. :)

— 브렛 켈리
소스

정말 멋져요! 동일한 클래스 이름에 대해 여러 섹션이있는 경우 어떻게합니까? 이제 4 개의 동일한 클래스 이름에 대해 시도해 보았고 하나를 가리키면 모두 변경됩니까 ?? 모든 섹션의 앞에 달리는 번호를 만들어야합니까? jquery는 어떤 종류의 와일드 카드를 지원합니까? (좋아요, 나는 단지 그것을 위해 구글 시도;!)) 감사합니다 ..

— 마르코

0

또는

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

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

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

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

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

— Jnr
소스