호버 (hover)에서 여러 요소 강조 표시

Question

한 요소를 마우스로 가리키면 여러 요소를 강조 표시하는 것이 일반적인 질문입니다. Stack about this issue에 대한 몇 가지 유사한 질문이 있지만 일반적으로 정보의 한 단계 만 처리합니다.

예 : 이 상자를 클릭하면 다른 상자를 강조하고 싶습니다.

이 기능을 세 가지 계층의 정보에 추가하고 상호 교환 할 수있게하려고합니다.

See the fiddle here.

가 더 잘 할 수있는 방법이 있다면 당신은 그것을가 작동,하지만 난 궁금 볼 수 있습니다. 예를 들어, 각 계층에 대해 약 12 ​​개의 옵션이있는 것은 좋지만, 50 또는 100이면 어떻게 될까요? 간소화 할 수있는 방법이 있습니까? 따라서 ID와 관련된 모든 클래스 이름을 수동으로 추가하지 않고도 각 계층에 여러 항목을 추가하는 것이 더 쉬울까요?

함수에 변수를 전달하여 명시 적 클래스 이름을 열 수있는 것 같지만 클래스에 대해 클래스의 이름을 모두 가져 오는 방법을 알지 못합니다. 다른 계층의 이름.

아니면 마술처럼 플러그인을 알고 있다면?

Answer 1

jQuery를 사용하는 가장 좋은 방법입니다. CSS와 클래스를 부모 요소에 적용하면 비슷한 효과를 얻을 수 있습니다.

<div> 
    <div class="bob">This is Bob.</div> 
</div> 

그런 다음 부모 요소에 클래스를 추가 : : 예를 들어

물론

<div class="show-bob"> 
    <div class="bob">This is Bob.</div> 
</div> 

는 CSS 키 여기에 있습니다 :

.bob { opacity: 0.75 } 
.show-bob .bob { opacity: 1 } 

물론, 당신이 필요로하는 CSS 애니메이션 속성을 실제 기능 패리티에 추가하려면 요지를 얻으십시오.