説明遅延付きのボックスが表示されます

Question

現在、マウスのホバー効果を作成しようとしていますが、説明を表示し、数秒間表示され、ユーザがhrefリンクの説明にマウスを使用できるようになり、あなたはマウスを遠ざけます。おかげ

function showbox(nodeId){ 
 
    document.getElementById(nodeId).style.display = 'block'; 
 
setTimeout(showbox,1000); 
 
} 
 

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

span.descriptionDisplay { 
 
    display:none; 
 
    padding: 20px; 
 
    margin: 15px 0 0 0; 
 
    width: 780px; 
 
    z-index: 999; 
 
    position: fixed; 
 
    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; 
 

 
}

Help your my only hope<a href="#" onmouseover="showbox('description') " onmouseout="hidebox('description')" onclick="return false;"> <sup>1</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

は、多分あなたは代わりにshowbox hidebox機能でのsetTimeoutを使用する必要がありますか？このように：

function hidebox(nodeId){ 
    setTimeout(() => { 
     document.getElementById(nodeId).style.display = 'none'; 
    }, 1000) 
} 

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

ここで、1000msは、マウス出力後に表示されるテキストの遅延です。

Answer 2

以下のコードを確認して、どのように動作させるかの例を示します。しかし、私はあなたの実際の必要性のためにこの実装を更新すべきだと思います。ここ

主なポイント：

• ツールチップを表示する前に、我々は（isHidden(nodeId)）がまだ表示されていないことを確認してください。ツールヒントがあるとき
• （onMouseOut）あなたが必要なときにタイマーを停止できるようにするには、タイムアウトshowBoxDelayTimeoutを設定した結果を保存する必要がありながら、
• 後にそれを呼び出すことができるように別の関数showboxに移動表示
• すでに別のタイマーが、しばらくして、それを隠すために設定されているshowBox（hideBox）

コード

var showBoxDelayTimeout = 0; 

function onMouseIn(nodeId) { 
    if(isHidden(nodeId)) { 
     showBoxDelayTimeout = setTimeout(showbox.bind(nodeId), 1000); 
    } 
} 

function onMouseOut(nodeId) { 
    clearTimeout(showBoxDelayTimeout); 
} 

function showBox(nodeId) { 
    document.getElementById(nodeId).style.display = 'block'; 
    setTimeout(hideBox.bind(nodeId), 2000); 
} 

function hideBox(nodeId) { 
    document.getElementById(nodeId).style.display = 'none'; 
} 

function isHidden(nodeId) { 
    document.getElementById(nodeId).style.display === 'none'; 
} 

を表示

DOM内に

<a href="#" onmouseover="onMouseIn('description') " onmouseout="onMouseOut('description')"