마우스가 설명 위에있을 때 열린 상태로 유지되는 설명 상자

Question

설명 상자 위에 마우스를 올려 놓을 때 내 설명 상자를 표시하려고 시도하고 설명 상자에 마우스가 없을 때 사라집니다.

function hidebox(nodeId){ 
 
      document.getElementById(nodeId).style.display = 'none'; 
 
    } 
 
    
 
    function showbox(nodeId){ 
 
     document.getElementById(nodeId).style.display = 'block'; 
 
    }

span.descriptionDisplay { 
 
     display:none; 
 
     padding: 20px; 
 
     margin: 15px 0 0 0; 
 
     width: 780px; 
 
     z-index: 999; 
 
     position: absolute; 
 
     background-color: #f2f2eb; 
 
     color: #222; 
 
     font-size: 19px; 
 
     line-height: 24px; 
 
     -webkit-box-shadow: 0px 0px 10px 10px rgba(7, 7, 7, 0.3); 
 
     box-shadow: 0px 0px 10px 10px rgba(7, 7, 7, 0.3); 
 
     -webkit-border-radius: 12px; 
 
     border-radius: 12px; 
 
    
 
    }

<a href="#" onmouseover="showbox('description')" onmouseout="hidebox('description')" onclick="return false;"> <sup>Help me stay open on hover </sup></a><span id="description" class="descriptionDisplay">See Jean E. Howard, The Stage and Social Struggle in Early Modern England (London: Routledge, 1994); Christopher Warley, Sonnet Sequences and Social Distinction in Renaissance England (Cambridge: Cambridge University Press, 2005); Christopher Warley, Reading Class Through Shakespeare, Donne, and Milton (Cambridge: Cambridge University Press, 2014).</span>

Answer 1

JS 필요 없다. 순수한 CSS로이 작업을 수행 할 수 있습니다.

필자가 변경 한 핵심 요소는 모든 것을 중심으로 컨테이너 요소를 만들고 설명을 위해 여백 - 위쪽을 컨테이너의 패딩 윗부분으로 변경하는 것이 었습니다.

예가 실패한 이유는 마우스 오버와 설명 사이에 여백 공간이 있었기 때문입니다. 이는 실제로 요소 위에 없었기 때문에 설명을 표시 할 수 없음을 의미합니다.

.container:hover .description { 
    display: block; 
} 

.description-container { 
    padding-top: 15px; 
} 

여기 데모 https://jsfiddle.net/joshmoxey/fsnt0t6v/