從透明PNG中獲取閃爍用作鼠標懸停圖像

Question

我爲此做了一些小動作，但找不到我在此嘗試做的確切事情。基本上我有一個圖像地圖，我想在鼠標懸停的圖像上方顯示隱藏的圖層。有5個不同的熱點和5個不同的隱藏層相對應，只有當您將鼠標懸停在相應的熱點上時纔會顯示。

問題是這樣的：頂部的每個隱藏層都包含一個帶有透明位的PNG，並且PNG幾乎與用戶的鼠標位於同一個位置。當它被鼠標懸停調用時，PNG會很快閃爍......我認爲，因爲頁面由於其透明度而無法確定鼠標是否在圖像上？

任何人都有一個聰明的解決方案呢？

我的頭得到這個：

<script type="text/javascript" language="JavaScript"> 
<!-- 
function HideContent(d) { 
if(d.length < 1) { return; } 
document.getElementById(d).style.display = "none"; 
} 
function ShowContent(d) { 
if(d.length < 1) { return; } 
document.getElementById(d).style.display = "block"; 
} 
function ReverseContentDisplay(d) { 
if(d.length < 1) { return; } 
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; } 
else { document.getElementById(d).style.display = "none"; } 
} 
//--> 
</script> 

這在頁面的正文：

<div id="homeowners" 
    style="display:none; 
     position:absolute; 
     left:0px; 
     top:39px; 
     padding: 5px; 
     z-index:10;"> 
<img src="<?php bloginfo('template_directory'); ?>/images/homeowners-over.png" width="257" height="107" alt="Homeowners" /></div> 
<div id="dealers" 
    style="display:none; 
     position:absolute; 
     left:319px; 
     top:39px; 
     padding: 5px; 
     z-index:10;"> 
<img src="<?php bloginfo('template_directory'); ?>/images/dealers-over.png" width="257" height="107" alt="Dealers" /></div> 
<div id="commercial" 
    style="display:none; 
     position:absolute; 
     left:0px; 
     top:509px; 
     padding: 5px; 
     z-index:10;"> 
<img src="<?php bloginfo('template_directory'); ?>/images/commercial-over.png" width="257" height="107" alt="Commercial" /></div> 
<div id="importers" 
    style="display:none; 
     position:absolute; 
     left:319px; 
     top:509px; 
     padding: 5px; 
     z-index:10;"> 
<img src="<?php bloginfo('template_directory'); ?>/images/importers-over.png" width="257" height="107" alt="Importers" /></div> 
<img src="<?php bloginfo('template_directory'); ?>/images/aww_home.jpg" width="586" height="638" border="0" usemap="#Map" /> 
    <map name="Map" id="Map"> 
     <area shape="poly" coords="3,4,293,4,293,25,4,313" href="#" 
    onmouseover="ShowContent('homeowners'); return true;" 
    href="javascript:ShowContent('homeowners')" 
    onmouseout="HideContent('homeowners'); return true;" 
    href="javascript:HideContent('homeowners')"> 
     <area shape="poly" coords="296,5,583,4,584,312,296,27" href="#" 
    onmouseover="ShowContent('dealers'); return true;" 
    href="javascript:ShowContent('dealers')" 
    onmouseout="HideContent('dealers'); return true;" 
    href="javascript:HideContent('dealers')"> 
     <area shape="poly" coords="294,32,8,317,295,603,575,318" href="#" /> 
     <area shape="poly" coords="5,322,4,633,294,634,294,608" href="#" 
    onmouseover="ShowContent('commercial'); return true;" 
    href="javascript:ShowContent('commercial')" 
    onmouseout="HideContent('commercial'); return true;" 
    href="javascript:HideContent('commercial')"> 
     <area shape="poly" coords="299,607,299,634,582,634,580,325" href="#" 
    onmouseover="ShowContent('importers'); return true;" 
    href="javascript:ShowContent('importers')" 
    onmouseout="HideContent('importers'); return true;" 
    href="javascript:HideContent('importers')"> 
    </map> 

非常感謝！

Answer 1

由於您尚未提及添加了mouseover和mouseout事件處理程序的元素，因此我將假定您調用showContent以顯示鼠標移過div時的png，並且您調用hideContent來隱藏png當鼠標在png上時。

如果這是正在發生的事情則閃爍的原因是：

當鼠標指針移動到格中，PNG顯示在DIV。因此鼠標現在超過了png，因爲在其上隱藏了鼠標懸停事件。現在鼠標懸停在div上，因此鼠標懸停事件在div上被觸發，因爲顯示了png。這將繼續進行。

解決方案： 1.將png（顯示時）放在離鼠標較遠處，以便png不直接位於鼠標光標的下方。 2.或者，從png中刪除mouseover事件處理程序，並將mouseout處理程序添加到div以隱藏png。

Answer 2

我改正了我的問題，當我添加.show彈出以及元素。當我的鼠標從一個元素轉換到另一個元素時，瀏覽器變得困惑。

$(function() { 
    $('.parent_div').hover(function() { 
     $('.show_popup').show(); 
    }, function() { 
     $('.show_popup').hide(); 
    }); 
}); 

$(function() { 
    $('.show_popup').hover(function() { 
     $('.show_popup').show(); 
    }); 
});