onmouseover不適用於z-index高於1的項目

我無法制作使用javascript的網站。我想要做的是有一個排序的時間線，當每個節點通過鼠標傳遞時，任何一方的信息都會更新。但是，我無法使用鼠標懸停來處理節點。我相信這是因爲他們超過了基線，他們每個人的z-索引都是2.任何人都可以幫我解決這個問題嗎？onmouseover不適用於z-index高於1的項目

<!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"> 
      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>

來源

2011-09-04 Matt Habel

請您重新與http://jsfiddle.net的問題，並利用實際的URL的圖像，使它們是可見的。 – tw16

@tw http://jsfiddle.net/Habel/wfBX9/評論是我認爲正在發生的事情。 –

在Firefox中的fiddle似乎做工精細，但在Chrome和IE #base重疊第二.dash。它不起作用的原因是因爲，雖然您已爲.dash設置了z-index:2，但您尚未設置的absolute,relative或fixed。沒有這些定位屬性中的一個，z-index將不起作用，因此.dash停留在#base之後。

.dash { 
    z-index:2; 
    float: left; 
    position: relative; /* add this */ 
}

活生生的例子：http://jsfiddle.net/tw16/wfBX9/9/

來源

2011-09-05 10:38:44 tw16

onmouseover不適用於z-index高於1的項目

回答

相關問題