IE7 Javascript悬停工作不正常

我做了一个简单的Javascript悬停效果，所以当你悬停一个div文本然后显示在下面的div，但在IE7只有一个随机少数将工作，如1,2,3 ，4,27,28和其他几个其他的只是不工作？IE7 Javascript悬停工作不正常

这里是我的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 

<head> 
<script> 
function menu (whichMenu,whatState){ 
if (document.getElementById) 
{document.getElementById(whichMenu).style.visibility = whatState;} 

else {document[whichMenu].visibility = whatState;} 

} 
function details(what){ 
myInfo={ 
"s1":"Flaunchin", 
"s2":"Chimney stack", 
"s3":"Ridge", 
"s4":"Flashing", 
"s5":"Barge board", 
"s6":"Dormer", 
"s7":"Water tabling", 
"s8":"Purlin", 
"s9":"Wall Plate", 
"s10":"Rafters", 
"s11":"Soffit", 
"s12":"Insulation", 
"s13":"Cold Water Storage Tank", 
"s14":"Central Heating Header Tank", 
"s15":"Felt and Battens", 
"s16":"Slating or Tiling", 
"s17":"Hip", 
"s18":"Fascia or Eaves", 
"s19":"Timber Stud Wall", 
"s20":"Floor Joists", 
"s21":"Hot Water Cylinder", 
"s22":"Overflow Pipe", 
"s23":"Cavity Brick or Block Wall", 
"s24":"Wall Ties", 
"s25":"Quoin Stone", 
"s26":"Gutter and Rain Water Pipe", 
"s27":"Felt with Stone Chippings on Decking", 
"s28":"Fair Faced Brickwork", 
"s29":"Damp Proof Course", 
"s30":"Hardcore", 
"s31":"Reveal", 
"s32":"Timber, Concrete or Steel Lintel", 
"s33":"Air Brick", 
"s34":"Concrete Slab", 
"s35":"Gulley with Granting", 
"s36":"Soil and Vent Pipe", 
"s37":"Manhole", 
"s38":"Electricity Main", 
"s39":"Solid Wall", 
"s40":"Wall Plates on Sleeper Wall", 
"s41":"Foul Drain", 
"s42a":"Underpinning", 
"s42b":"Underpinning", 
"s43":"Interceptor Trap", 
"s44":"Water Main" 
} 
detailsBox.innerHTML=myInfo[what] 
} 
</script> 
<style> 
body{width:980px;height:100%;margin:auto;margin-top:20px} 
#imagebg{background:url(house.png);height:640px;width:715px;margin:auto} 
.s1{width:20px;height:10px;margin-left:383px;margin-top:-615px} 
.s2{width:20px;height:10px;margin-left:365px;margin-top:21px} 
.s3{width:20px;height:10px;margin-left:430px;margin-top:-4px} 
.s4{width:20px;height:10px;margin-left:380px;margin-top:12px} 
.s5{width:20px;height:10px;margin-left:561px;margin-top:-5px} 
.s6{width:20px;height:10px;margin-left:445px;margin-top:27px} 
.s7{width:20px;height:10px;margin-left:320px;margin-top:-27px} 
.s8{width:20px;height:10px;margin-left:380px;margin-top:30px} 
.s9{width:20px;height:10px;margin-left:297px;margin-top:42px} 
.s10{width:20px;height:10px;margin-left:355px;margin-top:-44px} 
.s11{width:20px;height:10px;margin-left:339px;margin-top:31px} 
.s12{width:20px;height:10px;margin-left:410px;margin-top:-37px} 
.s13{width:20px;height:10px;margin-left:410px;margin-top:17px} 
.s14{width:20px;height:10px;margin-left:452px;margin-top:15px} 
.s15{width:20px;height:10px;margin-left:536px;margin-top:-74px} 
.s16{width:20px;height:10px;margin-left:585px;margin-top:-29px} 
.s17{width:20px;height:10px;margin-left:590px;margin-top:-35px} 
.s18{width:20px;height:10px;margin-left:693px;margin-top:70px} 
.s19{width:20px;height:10px;margin-left:636px;margin-top:41px} 
.s20{width:20px;height:10px;margin-left:655px;margin-top:70px} 
.s21{width:20px;height:10px;margin-left:475px;margin-top:-36px} 
.s22{width:20px;height:10px;margin-left:448px;margin-top:22px} 
.s23{width:20px;height:10px;margin-left:328px;margin-top:-105px} 
.s24{width:20px;height:10px;margin-left:311px;margin-top:31px} 
.s25{width:20px;height:10px;margin-left:278px;margin-top:-56px} 
.s26{width:20px;height:10px;margin-left:267px;margin-top:26px} 
.s27{width:20px;height:10px;margin-left:234px;margin-top:-23px} 
.s28{width:20px;height:10px;margin-left:214px;margin-top:38px} 
.s29{width:20px;height:10px;margin-left:204px;margin-top:43px} 
.s30{width:20px;height:10px;margin-left:197px;margin-top:82px} 
.s31{width:20px;height:10px;margin-left:300px;margin-top:-99px} 
.s32{width:20px;height:10px;margin-left:328px;margin-top:-19px} 
.s33{width:20px;height:10px;margin-left:327px;margin-top:60px} 
.s34{width:20px;height:10px;margin-left:395px;margin-top:32px} 
.s35{width:20px;height:10px;margin-left:423px;margin-top:33px} 
.s36{width:20px;height:10px;margin-left:462px;margin-top:-90px} 
.s37{width:20px;height:10px;margin-left:539px;margin-top:141px} 
.s38{width:20px;height:10px;margin-left:585px;margin-top:-102px} 
.s39{width:20px;height:10px;margin-left:589px;margin-top:-64px} 
.s40{width:20px;height:10px;margin-left:610px;margin-top:22px} 
.s41{width:20px;height:10px;margin-left:634px;margin-top:50px} 
.s42a{width:20px;height:10px;margin-left:685px;margin-top:-2px} 
.s42b{width:20px;height:10px;margin-left:742px;margin-top:-52px} 
.s43{width:20px;height:10px;margin-left:780px;margin-top:-71px} 
.s44{width:20px;height:10px;margin-left:723px;margin-top:-59px} 
#detailsBox{font-size:25px;margin-top:230px;margin-left:155px;font-weight:bold} 
</style> 
</head> 
<body> 
<div id="imagebg"></div> 
<div onMouseOver="details('s1')" class="s1"></div> 
<div onMouseOver="details('s2')" class="s2"></div> 
<div onMouseOver="details('s3')" class="s3"></div> 
<div onMouseOver="details('s4')" class="s4"></div> 
<div onMouseOver="details('s5')" class="s5"></div> 
<div onMouseOver="details('s6')" class="s6"></div> 
<div onMouseOver="details('s7')" class="s7"></div> 
<div onMouseOver="details('s8')" class="s8"></div> 
<div onMouseOver="details('s9')" class="s9"></div> 
<div onMouseOver="details('s10')" class="s10"></div> 
<div onMouseOver="details('s11')" class="s11"></div> 
<div onMouseOver="details('s12')" class="s12"></div> 
<div onMouseOver="details('s13')" class="s13"></div> 
<div onMouseOver="details('s14')" class="s14"></div> 
<div onMouseOver="details('s15')" class="s15"></div> 
<div onMouseOver="details('s16')" class="s16"></div> 
<div onMouseOver="details('s17')" class="s17"></div> 
<div onMouseOver="details('s18')" class="s18"></div> 
<div onMouseOver="details('s19')" class="s19"></div> 
<div onMouseOver="details('s20')" class="s20"></div> 
<div onMouseOver="details('s21')" class="s21"></div> 
<div onMouseOver="details('s22')" class="s22"></div> 
<div onMouseOver="details('s23')" class="s23"></div> 
<div onMouseOver="details('s24')" class="s24"></div> 
<div onMouseOver="details('s25')" class="s25"></div> 
<div onMouseOver="details('s26')" class="s26"></div> 
<div onMouseOver="details('s27')" class="s27"></div> 
<div onMouseOver="details('s28')" class="s28"></div> 
<div onMouseOver="details('s29')" class="s29"></div> 
<div onMouseOver="details('s30')" class="s30"></div> 
<div onMouseOver="details('s31')" class="s31"></div> 
<div onMouseOver="details('s32')" class="s32"></div> 
<div onMouseOver="details('s33')" class="s33"></div> 
<div onMouseOver="details('s34')" class="s34"></div> 
<div onMouseOver="details('s35')" class="s35"></div> 
<div onMouseOver="details('s36')" class="s36"></div> 
<div onMouseOver="details('s37')" class="s37"></div> 
<div onMouseOver="details('s38')" class="s38"></div> 
<div onMouseOver="details('s39')" class="s39"></div> 
<div onMouseOver="details('s40')" class="s40"></div> 
<div onMouseOver="details('s41')" class="s41"></div> 
<div onMouseOver="details('s42a')" class="s42a"></div> 
<div onMouseOver="details('s42b')" class="s42b"></div> 
<div onMouseOver="details('s43')" class="s43"></div> 
<div onMouseOver="details('s44')" class="s44"></div> 

<div id="detailsBox">Hover Over the Numbers to Find the Answer</div> 
</body> 
</html>

任何帮助将是巨大的：d

（您还可以查看它http://cameronmlewis.com/house/）

来源

2011-05-31 Cameron Mark Lewis

http://en.wikipedia.org/wiki/Don't_repeat_yourself – 2011-05-31 12:55:55

对不起？这是什么意思？ – 2011-05-31 12:57:47

这不是你的问题的答案，但是那些大小不一的div和CSS类的列表，它们都不同*很微小*，应该暗示你的代码不太可维护。 – 2011-05-31 13:00:27

很抱歉，但它花了一些时间搞清楚什么是在IE7中出错，但我认为我发现了你的问题。您一直使用margin-left和margin-top重新定位自动对齐的图像。对于大多数浏览器来说，这可以正常工作，但IE浏览器甚至包括IE7在内，这是最好的。因此，在这里，body元素被绘制在一些悬停DIV的顶部。

如果你有IE8 +，你可以使用开发工具来查看。您可以在页面完全加载后按F12来完成此操作，将浏览器模式设置为IF7，然后使用'Select element by click'工具（CTRL + B）尝试选择您创建的DIV。您会注意到，您只能选择正文元素顶部的元素（这些也会更改悬停时的文本）。

最佳选择是使用'position：absolute;'和'z-index'，如果你想重新定位这样的DIV。同时清理你的CSS我建议你做到以下几点：

<style> 
.hoverDiv { 
    height: 10px; 
    position: absolute; 
    width: 20px; 
    z-index: 9999; 
} 

.s1 { 
    left: 300px; 
    top: 10px; 
} 

.s2 { 
    left: 350px; 
    top: 130px; 
} 
</style>

在这之后你可以让你的DIV像这样：

<div class="hoverDiv s1">&nbsp;</div>

这使用CSS继承来清理你的代码（扣除重复），并且使小编辑更容易。此外，我会考虑使用一些DIV参数来存储文本，而不是将它们放入JavaScript中 - 但这取决于您。

来源

2011-05-31 13:39:42 KilZone

哇，对不起，延迟，完美的作品。谢谢。 – 2011-06-01 21:01:22

IE7 Javascript悬停工作不正常

回答

相关问题