호버에서 다른 div를 컨테이너 안에 표시

Question

커서를 컨테이너 div에 전달할 때 다른 컨테이너에 다른 속성이있는 경우 (예 : 컨테이너 div에 불투명도가있는 배경 그림이있는 div 포함) 0.2. child div를 만들고 싶습니다. 커서가 컨테이너를 지나갈 때, 속성이 100 % 표시되고 불투명도가 1이됩니다. 어떻게하면됩니까? 여기

은 예입니다하지만 난 자식 사업부를 통해 커서를 통과하면 불행히도에만 작동 : jQuery로 http://jsfiddle.net/Vqmaw/2129/

Answer 1

변경 #maifis:hover 규칙을 #container:hover #maifis으로 변경하십시오. 즉, # 컨테이너을 올렸을 때 자녀에게 #maifis의 규칙을 적용한다는 의미입니다.

근무 데모 : 최신 브라우저에서 jsFiddle

Answer 2

이

:

$('#maifis').hover(function(){ 
    $(this).animate({'opacity':1}, 300); 
}, function(){ 
    $(this).animate({'opacity':0.2}, 300); 
}); //Hover on maifis div 

나 :

$('#container').hover(function(){ 
    $('#maifis').animate({'opacity':1}, 300); 
}, function(){ 
    $('#maifis').animate({'opacity':0.2}, 300); 
}); //Hover on container div 

Answer 3

이 작동합니다 :

#maifis { 
    opacity:0.2; 
} 
#container:hover #maifis { 
    opacity:1; 
} 

두 번째 CSS 라인은 #container을 가리킬 때의 불투명도를가함으로써, #maifis이라는 요소가 포함 된 것을 의미한다 1.

Answer 4

AFAIK, 이것은 순수 CSS에서는 가능하지 않습니다. 당신의 정보와 jsfiddle을 바탕으로,이 JQuery와 JS

$(function() { 
    $('#container').bind('mouseover', function(){ 
     $('#maifis').addClass('visible'); 
    }) 
    $('#container').bind('mouseout', function(){ 
     $('#maifis').removeClass('visible'); 
    }) 
}); 

를 사용하여 CSS의 #maifis:hover 단순히 .visible에 변경합니다.