두 가지 요소가 있습니다. 두 요소 중 하나를 강조 표시하면 모두과 위상을 둡니다. 일반 형제 연산자 (~)를 사용하여이 작업을 수행하려고했습니다. 그러나 이것은 하나의 경우에만 효과가있는 것으로 보입니다. 문제는 my website에 나와 있습니다. 하루 요소의 단어 위로 마우스를 가져 가면 강조 표시된 유일한 요소입니다. 이 형제 연산자는 div.foo ~ .bar 같은 형제 태그에 대한 html의 foo 다음에 선언 된 요소에서만 작동합니다. 화용두 요소가 서로 강조 표시됩니다.

CSS는

div.lisWrap:hover ~.wordSpace, .lisWrap:hover{ //works 
    opacity: .8; 
    transition: all 1.5s ease; 
} 

div.wordSpace:hover ~.lisWrap, .wordSpace:hover{ //doesnt work 
    opacity: .8; 
    transition: all 1.5s ease; 
}

출처

2014-12-16 Christopher Munroe

기존 방식으로는 뒤로 할 수 없습니다. 상위 요소의 영역이이 두 요소만으로 구성되어있는 경우 상위 요소에 마우스를 가져 가면 속일 수 있습니다. 그렇지 않으면 자바 스크립트가 필요합니다. – BoltClock

jQuery 또는 javascript 사용 –

@BoltClock 제안 해 주셔서 감사합니다. 이 CSS 속성을 상위 div에 적용합니다. –

~ 연결자 두 개의 선택기를 분리하고 상기 제 선행하는 경우에만 두 번째 요소와 일치하고, 공통 부모를 공유하는 두. https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

CSS에서 이전 요소 나 부모 요소를 처리 할 수 없습니다. 그것은 일종의 법입니다.

더 좋은 방법은 가져 오는 것입니다. 두 요소가 모두 포함 된 요소에 마우스를 올리면됩니다.

출처

2014-12-16 03:21:58

두 요소가 서로 강조 표시됩니다.

CSS는

답변

관련 문제