マウスが説明の上にあるときに開いている説明ボックス

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/