问为什么我的图像切换器在IE中不起作用
EN

Stack Overflow用户

提问于 2013-02-13 04:00:32

回答 1查看 108关注 0票数 0

访问:查看我的示例：http://www.nycthirst.com/test-space/test-orig-best.html

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
<!--


div#GHOLD { position: relative; width: 400px; height: 464px; 
          }
div.gname { position: absolute; top: 7px; left: 0px; height: 23px;  text-align: center;
            /*border: solid black 1px; padding-top: 4px;*/
            z-index: 20;
          }
div.bname { position: absolute; top: 3px; left: 0px; height: 27px;  text-align: center;
            padding-top: 4px;
            /*border:solid black 1px;*/
            z-index: 25;
          }
div.ihold { position: absolute; top: 36px; left: 0px; 
            width: 400px; height: 360px; z-index: 10; 
          }
img.bgraph { border: none; width: 400px; height: 360px; z-index: 10; }

-->
</style>


<script type="text/javascript">
function graphShow(which)

{
var ghold = document.getElementById("GHOLD");
var gdivs = ghold.getElementsByTagName("DIV");
gdivs[0].className = gdivs[1].className = gdivs[2].className = "gname";
gdivs[which].className = "bname";
gdivs[3].style.zIndex = gdivs[4].style.zIndex = gdivs[5].style.zIndex = 10;
gdivs[which+3].style.zIndex = 15;

}

</script>
</head>
<body>
<div id="GHOLD">
  <div class="bname" style="left: 39px;  width: 77px; height: 135px; top: 35px;" onMouseOver="graphShow(1);"></div>
  <div class="gname" style="left: 162px; width: 77px; height: 135px; top: 35px;" onMouseOver="graphShow(0);"></div>
  <div class="gname" style="left: 280px; width: 77px; height: 135px; top: 35px;" onMouseOver="graphShow(2);"></div>
  <div class="ihold" style="z-index: 15;">
    <img class="bgraph" src="http://www.asme.org/wwwasmeorg/media/ASMEMedia/Events/Energy/energy_landing_page_drop1.png" alt="95 percent">
  </div>
  <div class="ihold">
    <img class="bgraph" src="http://www.asme.org/wwwasmeorg/media/ASMEMedia/Events/Energy/energy_landing_page_drop2.png" alt="69 percent" style="z-index: 10;">
  </div>
  <div class="ihold">
    <img class="bgraph" src="http://www.asme.org/wwwasmeorg/media/ASMEMedia/Events/Energy/energy_landing_page_drop3.png" alt="52 percent" style="z-index: 10;">
  </div>
</div>

</body>
</html

下面就是上面的页面代码在firefox和chrome中完美运行的例子。它在IE中不做任何事情。这个想法是在鼠标经过或经过背景图像会改变的状态上。如果有更简单的解决方案，我很乐意看到。我是一个Javascript的新手。

javascript

internet-explorer

mouseover

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-02-13 08:06:53

IE似乎不喜欢将鼠标事件传递给它看不见的元素。如果您的触发器div上没有背景或可见文本，mouseover事件将直接通过它们。

基本上，你必须给触发器div一个背景或内容，它覆盖了你想要发生鼠标悬停的区域。IE不关心背景的内容，只要它在那里并且不是“透明”的颜色。你甚至应该能够使用1x1透明的GIF作为背景，只要你平铺它。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14840736

复制

相似问题

问为什么我的图像切换器在IE中不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的图像切换器在IE中不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的图像切换器在IE中不起作用
EN