떠 다니는 div와 다른 div의 불투명도 변경

두 개의 div가 동시에 불투명도를 변경해야하므로 togehter에서 작업해야합니다. 두 div는 모두 skew()로 변형되고 이미지 위에 절대 위치하므로 특정 형식을 갖습니다. 즉, 두 div를 다른 최상위 div로 래핑 할 수 없습니다.떠 다니는 div와 다른 div의 불투명도 변경

#top { 
 
    background-color: red; 
 
    width: 200px; 
 
} 
 
#left { 
 
    width: 200px; 
 
    opacity: 0; 
 
} 
 
#right { 
 
    text-align: right; 
 
    width: 200px; 
 
    opacity: 0; 
 
} 
 

 

 

 
#left:hover, 
 
#left:hover ~ #right, 
 
#right:hover, 
 
#top:nth-child(1):hover > #left { 
 
    background-color: rgba(0, 150, 150, 0.4); 
 
    opacity: 1; 
 
}

<div id="top"> 
 
    <div id="left">LEFT</div> 
 
    <div id="right">RIGHT</div> 
 
</div>

이제 질문 : 나는 불투명도 변경의 첫 번째 DIV 두 번째 DIV의 불투명도 유혹있을 때도 동시에 변경됩니다. 여태까지는 그런대로 잘됐다. 두 번째 div 위로 마우스를 가져 가면 불투명도가 변경되지만 첫 번째 div의 불투명도는 변경되지 않습니다. 위의 스 니펫에서 모든 것이 잘 작동하지만 내 IDE에서는 작동하지 않습니까?!

나는 #top:nth-child(1):hover > #left이 제대로 작동하지 않는다고 생각합니다. 내가 왜 스 니펫에서 작동하지만 내 IDE에서는 작동하지 않는지 궁금하네요?! 이처럼 내 IDE 뭔가에

발생 : 난 아직도 유일한 해결책 CSS를 기다리고하지만 사용하여 자신을 도울 수

#top { 
 
    background-color: red; 
 
    width: 200px; 
 
} 
 
#left { 
 
    width: 200px; 
 
    opacity: 0; 
 
} 
 
#right { 
 
    text-align: right; 
 
    width: 200px; 
 
    opacity: 0; 
 
} 
 

 

 

 
#left:hover, 
 
#left:hover ~ #right, 
 
#right:hover, 
 
#right:hover ~ #left { 
 
    background-color: rgba(0, 150, 150, 0.4); 
 
    opacity: 1; 
 
}

<div id="top"> 
 
    <div id="left">LEFT</div> 
 
    <div id="right">RIGHT</div> 
 
</div>

출처

2014-11-07 Ilker Cat

가능한 복제본 [ 한 요소 위로 마우스를 가져 가서 다른 요소에 영향을 줄 수있는 방법이 있습니까?] (http://stackoverflow.com/questions/6867257/is-there-any-way-to-hover-over-one-element-and-affect) -a-different-element) – Turnip

@Moobs 중복이 아니지만 비슷합니다. 제 질문은 좀 더 구체적입니다. 귀하의 링크에있는 질문에서와 같은 해결책을 가지고 있지만 내 문제는 내부 div가 기본 이미지에 적용된 특정 양식을 가지고 있기 때문에 '# top'div를 사용할 수 없다는 것입니다. 그래서 나는 내부 div를 사용하여 마주침을 할 수 있지만 동시에 두 가지 모두에 영향을 주어야합니다. 즉 ** 내부 div를 가리키면 둘 다 불투명도를 변경해야하며 그 반대도 마찬가지입니다 **. –

jQuery를 :

$(document).ready(function() { 
    $('#right').hover(function() { 
    $('#left').css({'background-color': 'rgba(0, 150, 150, 0.4)', 
        'opacity': '1'}); 
    }, function(){ 
    $('#left').css({'background-color': '', 
        'opacity': ''}); 
    }); 
});

JSFiddle Demo

출처

2014-11-07 14:27:37

떠 다니는 div와 다른 div의 불투명도 변경

답변

관련 문제