1

私はテンプレート ファイルに取り組んでおり、3 つのリスト項目を持っています。ロールオーバーすると、非表示をロードして表示される div ごとにテキストが強調表示されます。マウスアウトでは、div が再び非表示になる前に遅延が設定されます。clearTimeout は、ユーザーがリストされたアイテム間を移動する場合に使用されるため、新しく選択された div が読み込まれ、古いものは再び非表示になります。スクリプトが機能しているので、助けが必要です。アイテムを一番下のアイテムから上にロールオーバーすると、clearTimeout は希望どおりに機能しますが、最初のアイテムから下に移動すると、タイムアウトがまったくクリアされません。

<script>function myClear1()
{
    clearTimeout(myFunction1, myFunction2, myFunction3);
    }
function myFunction1()
{
setTimeout(function(){document.getElementById('relatedproduct1').style.display = 'none';},500);
}
function myFunction2()
{
setTimeout(function(){document.getElementById('relatedproduct2').style.display = 'none';},500);
}
function myFunction3()
{
setTimeout(function(){document.getElementById('relatedproduct3').style.display = 'none';},500);
}
</script>

これらはスクリプトであり、ページで使用されているコードを以下に追加します。

<form class="relatedcheckboxes">
<input type="checkbox" class="relatedcheckboxes">
<div style="display:inline;cursor:pointer; color:#00F; background-color:#FFF;"onmouseover="document.getElementById('relatedproduct1').style.display = 'block'; document.getElementById('selectedProductsGroup').style.display ='none'; myClear1()"onmouseout="myFunction1()">Product Number:</div> Product Name - Sale Price
<br>
<input type="checkbox" name="Product Name" value="" class="relatedcheckboxes">
<div style="display:inline; cursor:pointer; color:#00F; background-color:#FFF;"onmouseover="document.getElementById('relatedproduct2').style.display = 'block';document.getElementById('selectedProductsGroup').style.display ='none';myClear1()"onmouseout="myFunction2()">Product Number</div>: Product Name - Sale Price
<br />
<input type="checkbox" name="Product Name" value="" class="relatedcheckboxes">
<div style="display:inline; cursor:pointer; color:#00F; background-color:#FFF;"onmouseover="document.getElementById('relatedproduct3').style.display = 'block';  myClear1()"onmouseout="myFunction3()">Product Number</div>: Product Name - Sale Price
</form>
4

1 に答える 1