onmouseover Not working with items that have a z-index higher than one
I am having trouble making a website using javascript. What I want to do is have a timeline of sorts which when each node is passed over by the mouse, the information on either side is updated. However, I am unable to get on mouseover to work with the nodes. I believe this is happening because they are over the base line, with each of them having a z-index of 2. Can anyone help me out with this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="site.css">
<title></title>
<script type="text/javascript"&开发者_JAVA百科gt;
baseLine = new Image()
dash = new Image()
baby = new Image()
brokenleg = new Image()
compsci = new Image()
grad = new Image()
inhaler = new Image()
orioles = new Image()
python = new Image()
qohs = new Image()
bus = new Image()
baseLine.src="LineBase.png"
dash.src="images/dash.png"
baby.src="images/baby.png"
brokenleg.src="images/brokenleg.png"
compsci.src="images/compsci.png"
grad.src="images/grad.png"
inhaler.src="images/inhaler.png"
orioles.src="images/orioles.png"
python.src="images/python.png"
qohs.src="images/qohs.png"
bus.src="images/bus.png"
</script>
<script type="text/javascript">
function mouseOver()
{
alert(1); //testing purposes
}
</script>
</head>
<body>
<div id="container">
<div id="picture-container">
<img id="tagImage" src="images/baby.png" name="tag" onmouseover="alert(1)"/> // this works
</div>
<div id="time-line">
<img id="base" src="images/LineBase.png" />
<img class="dash" src="images/dash.png" onmouseover="alert(1)"/> // but this doesn't
<img class="dash" src="images/dash.png" />
<img class="dash" src="images/dash.png" />
<img class="dash" src="images/dash.png" />
<img class="dash" src="images/dash.png" />
<img class="dash" src="images/dash.png" />
<img class="dash" src="images/dash.png" />
<img class="dash" src="images/dash.png" />
<img class="dash" src="images/dash.png" />
<img class="dash" src="images/dash.png" />
</div>
<div id="story-box">
<h1 id="hey">hey</h1>
</div>
</div>
</body>
</html>
In Firefox your fiddle seems to work fine, however in Chrome and IE #base overlaps the second .dash. The reason it's not working is because, whilst you have set z-index:2 for .dash you have not set a position of absolute, relative or fixed. Without one of these positioning properties the z-index will not work, and so .dash stays behind #base.
.dash {
z-index:2;
float: left;
position: relative; /* add this */
}
Live example: http://jsfiddle.net/tw16/wfBX9/9/
加载中,请稍侯......
精彩评论