从透明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(); 
    }); 
});