JS - 호버 관련 div 스크롤

Question

#HoverMe 위에 마우스를 올려 놓으면 #hidden div (숨겨져있을 때 숨겨 짐)의 내용을 볼 수있는 div가 두 개 있습니다. 목록이 조금 길면 스크롤 할 수 있습니다. 그러나 나는 #HoverMe div로 커서를 이동하는 동안 스크롤 할 수 없습니다. #Hidden div를 스크롤하려면 다시 움직여야합니다. 그러면 결과가 다시 사라집니다 (분명히).

#HoverMe에 마우스를 올려 놓고 5 초 동안 #hidden으로 이동할 수 있기를 바랍니다. 숨기기 전에 #hidden를 가리키면 숨기기 타이머가 중지되고 내용을 스크롤하고 확인할 수 있습니다.

가능한 악화 대체 솔루션 :

스크롤 #Hidden DIV 마우스 #HoverMe에있는 동안?

그것과 같은 방법 :

     ------------  --------- _ 
        | #HoverMe | | #hidden |S|       
         ------------ | --------|R| 
             | car.name|O|  
             |---------|L| 
             | car.name|L| 
             ---------|B| 
             | car.name|A| 
             |---------|R| 
             | car.name| | 
             ---------|_| 

코드 :!

<div> 
    <div id="HoverMe" style="width: 100px; background: green"> 
     Car 
    </div> 
    <div id="hidden" style="overflow:auto; height:100px; position: absolute; background-color: red; display: none"> 

     @foreach (var car in Model.Car) { @* Where the #hidden list get its content *@ 
      <div>@car.Name</div> 
     } 

    </div> 
</div> 


<script> 
    var hoverEle = document.getElementById("HoverMe"); 
    var popupEle = document.getElementById("hidden"); 

    hoverEle.addEventListener('mouseover', function() { 
     var hoverRect = hoverEle.getBoundingClientRect(); // get the position of the hover element 
     popupEle.style.left = (hoverRect.right + 16) + "px"; 
     popupEle.style.top = hoverRect.top + "px"; 
     popupEle.style.display = "block"; 

    }, false); 

    hoverEle.addEventListener('mouseout', function() { 
     popupEle.style.display = "none"; 
    }, false); 
</script> 

Answer 1

(BTW,이 질문은 jQuery로 표시되어 있지만 실제로 단지 바닐라 JS를 사용하는 문제 없음, 물론, 단지 알려주는 것입니다!)

당신은 확실한 길을 가고 있습니다. 시간 초과를 설정하고이를 지우면 처리 할 수있을 것 같습니다.

<div> 
    <div id="HoverMe" style="width: 100px; background: green"> 
     Car 
    </div> 
    <div id="hidden" style="overflow:auto; height:100px; position: absolute; background-color: red; display: none"> 

     @foreach (var car in Model.Car) { @* Where the #hidden list get its content *@ 
      <div>@car.Name</div> 
     } 

    </div> 
</div> 


<script> 
    var hoverEle = document.getElementById("HoverMe"); 
    var popupEle = document.getElementById("hidden"); 
    var timeoutId; 

    function showPopup() { 
     var hoverRect = hoverEle.getBoundingClientRect(); // get the position of the hover element 
     popupEle.style.left = (hoverRect.right + 16) + "px"; 
     popupEle.style.top = hoverRect.top + "px"; 
     popupEle.style.display = "block"; 
    } 

    function hidePopup() { 
     popupEle.style.display = "none"; 
    } 

    hoverEle.addEventListener('mouseover', function() { 
     showPopup(); 
    }, false); 

    hoverEle.addEventListener('mouseout', function() { 
     timeoutId = window.setTimeout(function() { 
      hidePopup(); 
     }, 5000); 
    }, false); 

    popupEle.addEventListener('mouseover', function() { 
     if (timeoutId) { 
      window.clearTimeout(timeoutId); 
     } 
    }, false); 

    popEle.addEventListener('mouseout', function() { 
     hidePopup(); 
    }, false); 

</script> 

Answer 2

당신은 즉시 setTimeout를 사용하여 트리거 또는 팝 오버 요소로 마우스에 팝 오버를 숨기고 대신 숨어있는 조치를 예약하고 다시 트리거 또는 팝 오버에 마우스를 가져 가면을 취소 할 수 있습니다.

window.onload = function() { 
 
    var triggerEl = document.querySelector('.trigger'); 
 
    var popoverEl = document.querySelector('.popover'); 
 
    
 
    var hideTimer = null; 
 
    
 
    triggerEl.addEventListener('mouseover', function() { 
 
    showPopover(); 
 
    }, false); 
 

 
    triggerEl.addEventListener('mouseout', function() { 
 
    scheduleHidingPopover(); 
 
    }, false); 
 
    
 
    popoverEl.addEventListener('mouseover', function() { 
 
    cancelHidingPopover(); 
 
    }, false); 
 
    
 
    popoverEl.addEventListener('mouseout', function() { 
 
    scheduleHidingPopover(); 
 
    }, false); 
 

 
    function showPopover() { 
 
    cancelHidingPopover(); 
 
    popoverEl.classList.remove("hidden"); 
 
    } 
 
    
 
    function hidePopover() { 
 
    cancelHidingPopover(); 
 
    popoverEl.classList.add("hidden"); 
 
    } 
 

 
    function scheduleHidingPopover() { 
 
    cancelHidingPopover(); 
 
    hideTimer = setTimeout(function() { 
 
     hidePopover(); 
 
     hideTimer = null; 
 
    }, 1000); 
 
    } 
 
    
 
    function cancelHidingPopover() { 
 
    if (hideTimer) { 
 
     clearTimeout(hideTimer); 
 
     hideTimer = null; 
 
    } 
 
    } 
 

 
};

.trigger { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    background-color: #eef; 
 
} 
 
.popover { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    background-color: #fee; 
 
    max-height: 100px; 
 
    overflow: auto; 
 
} 
 
.hidden { 
 
    display: none !important; 
 
}

<div class="trigger">Hover over me</div> 
 
<div class="popover hidden"> 
 
    I will pop over.<br> 
 
    Lorem ipsum<br> 
 
    Lorem ipsum<br> 
 
    Lorem ipsum<br> 
 
    Lorem ipsum<br> 
 
    Lorem ipsum<br> 
 
    Lorem ipsum<br> 
 
    Lorem ipsum<br> 
 
</div>

JQuery와 버전

:

$(function() { 
 
    var $triggerEl = $('.trigger'); 
 
    var $popoverEl = $('.popover'); 
 
    
 
    var hideTimer = null; 
 
    
 
    $triggerEl.on('mouseover', function() { 
 
    showPopover(); 
 
    }); 
 

 
    $triggerEl.on('mouseout', function() { 
 
    scheduleHidingPopover(); 
 
    }); 
 
    
 
    $popoverEl.on('mouseover', function() { 
 
    cancelHidingPopover(); 
 
    }); 
 
    
 
    $popoverEl.on('mouseout', function() { 
 
    scheduleHidingPopover(); 
 
    }); 
 

 
    function showPopover() { 
 
    cancelHidingPopover(); 
 
    $popoverEl.removeClass("hidden"); 
 
    } 
 
    
 
    function hidePopover() { 
 
    cancelHidingPopover(); 
 
    $popoverEl.addClass("hidden"); 
 
    } 
 

 
    function scheduleHidingPopover() { 
 
    cancelHidingPopover(); 
 
    hideTimer = setTimeout(function() { 
 
     hidePopover(); 
 
     hideTimer = null; 
 
    }, 1000); 
 
    } 
 
    
 
    function cancelHidingPopover() { 
 
    if (hideTimer) { 
 
     clearTimeout(hideTimer); 
 
     hideTimer = null; 
 
    } 
 
    } 
 

 
});

.trigger { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    background-color: #eef; 
 
} 
 
.popover { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    background-color: #fee; 
 
    max-height: 100px; 
 
    overflow: auto; 
 
} 
 
.hidden { 
 
    display: none !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="trigger">Hover over me</div> 
 
<div class="popover hidden"> 
 
    I will pop over.<br> 
 
    Lorem ipsum<br> 
 
    Lorem ipsum<br> 
 
    Lorem ipsum<br> 
 
    Lorem ipsum<br> 
 
    Lorem ipsum<br> 
 
    Lorem ipsum<br> 
 
    Lorem ipsum<br> 
 
</div>

참고 많은하지 가지가 변경된 것을. 변수는 더 이상 DOM 요소가 아니라 (바닐라 JS 예에서와 같이) jQuery 래퍼임을 명확히하기 위해 접두어로 $이라는 접두어가 붙습니다. jQuery의 힘은 간결하고 편리하며 (DOM 요소보다 JQuery 래퍼로 더 많은 일을 할 수 있습니다) 브라우저 불일치를 완화합니다 (이 요소는 jQuery가 상승한 10 년 전보다 덜 중요합니다).