아래 레이어에서 마우스 동작을 잃지 않고 DIV 오버레이를 사용하는 방법?

다양한 컨트롤이 포함 된 웹 페이지가 있고 그 중 일부에는 마우스 오버 및 클릭 동작이 정의되어 있다고 가정 해 보겠습니다. 그럼, 나머지 페이지의 상단에 중첩하기 위해 추가 정보 페이지에 반투명 DIV 오버레이를 추가아래 레이어에서 마우스 동작을 잃지 않고 DIV 오버레이를 사용하는 방법?

이 오버레이이 요구되는 다른 내용의 위에 새 레이어를 생성

<div class="overlay"></div> 

.overlay { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    background: rgba(0,0,0,.5); 
}

하지만 안타깝게도 기본 컨트롤을 사용하여 마우스 동작을 차단합니다. 새 레이어가 활성화되면 기본 컨트롤을 가리키고 클릭하면 아무 것도 수행되지 않습니다.

기본 콘텐츠와 마우스 상호 작용을 유지하면서 이러한 방식으로 오버레이를 사용하는 방법이 있습니까?

내 응용 프로그램에서는 오버레이가 필요하지만 작동 가능한 JavaScript, CSS, jQuery 또는 기타 기술을 사용할 수 있습니다.

감사합니다.

출처

2012-01-25 BrianFinkel

가능한 복제 http://stackoverflow.com/questions/1737480/passing-mouse-clicks-through-an-overlaying-element-div 및 http://stackoverflow.com/questions/1401658/html-overlay- 클릭 할 때 클릭 할 수있는 요소가 뒤 따르는 요소 – j08691

불행히도, 아니오. 내가 비슷한 것을 할 수있는 유일한 방법은 오버레이 div 위에 이미지 맵이있는 반투명 이미지를 사용하고 그것을 모두 위로 가짜로 만드는 것입니다. 이것은 분명히 지나치게 복잡하며 다른 방법으로이 오버레이로 얻는 효과를 얻기위한 솔루션을 찾아야하지만 원하는 효과를 얻을 수 있습니다.

출처

2012-01-25 03:43:04

실제로 그럴 수 있습니다. OP에 대한 내 코멘트와 http://www.vinylfox.com/forwarding-mouse-events-through-layers/의 링크를 참조하십시오. – j08691

@ j08691 멋진 기술이지만 페이지를 스크롤하면 실패하는 것 같습니다. 그게 극복 되었습니까? –

방금 작성했습니다 ... 거의 테스트하지 않았습니다. 미안하지만 일종의 일이라고 생각해.

$.fn.invisiClone = function() { 
    $.each($(this), function() { 
     var newTop = $(this).offset().top; 
     var newLeft = $(this).offset().left; 
     var newHeight = $(this).outerHeight() 
     var newWidth = $(this).outerWidth() 
     var newClass = $(this).attr('class'); 
     var newId = $(this).attr('id'); 

     var newDiv = document.createElement('div'); 
     $(newDiv).attr('class', newClass); 
     $(newDiv).attr('id', newId); 
     $(newDiv).css({ 
      position: 'absolute', 
      top: newTop, 
      left: newLeft, 
      height: newHeight, 
      width: newWidth, 
      'background-color': 'transparent', 
      'z-index': 1000 
     }) 

     $(newDiv).attr('delete','delete') 

     $(newDiv).html(''); 

     $(newDiv).prependTo('body'); 

    }) 


} 

function killInvisiClones() { 
    $('*[delete]').remove(); 
}

그래서 당신이 있지만, 몸을 앞에 추가하여 ID를 중복으로

$('.keepAlive').invisiClone();

이 기술적으로 잘못된 관행, 그들이 활성화해야한다 원하는 DOMS에 대해 기능을 실행하여 시작 이전에 존재하던 DOMs에 대한 지배력. 당신이 실행하여 오버레이를 제거한 후에는 그들을 죽일 것이 매우 중요하다

killInvisiClones()

다시 아니라 기술적으로 가장 올바른 방법,하지만 상대적으로 보편적으로 작동합니다.

출처

2012-01-25 03:59:31

그러면 솔루션이 모든 항목을 복제하여 오버레이 앞에 배치합니다. – BrianFinkel

투명하지만 중복되므로 오버레이가 계속 반투명하게 나타납니다. –

투명한 * 배경 *을 사용하여 오버레이를 뒤집을 수 있습니다. 그냥 명확히해라. – BrianFinkel

CSS3의 최신 속성 인 pointer-events를 사용할 수 있습니다 : none;

이 속성은 모든 마우스 이벤트를 무시하고 아래 레이어로 보내도록 브라우저에 지시합니다.

출처

2012-01-25 10:00:35

이것은 완벽하고 쉬운 솔루션 인 것처럼 보이지만 아직 공식적으로 또는 광범위하게 지원되지 않을 수 있습니다.See : https://developer.mozilla.org/en/CSS/pointer-events – BrianFinkel

하지만 overlaying div에서 모든 마우스 이벤트를 무시하고 싶지는 않습니다. 마우스 이벤트를 트리거해야합니다. – RaisinBranCrunch

아래 레이어에서 마우스 동작을 잃지 않고 DIV 오버레이를 사용하는 방법?

답변

관련 문제