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来显示png，当鼠标移过div而你正在调用{{ 1}}当鼠标悬停在png上时隐藏png。

如果发生了这种情况，那么闪烁的原因是：

当鼠标移过div时，png显示在div上方。因此鼠标现在超过了png，因为在png上触发了哪个鼠标悬停事件。现在鼠标在div之上，因为显示了png，因此在div上触发了mouseover事件。这将继续下去。

解决方案： 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();
    });
});

从用作鼠标悬停图像的透明PNG中获取闪烁

2 个答案: