Problem mit DIV Show / Hide Code?

Question

Aug 11, 2012, 08:34 PM

Problem mit DIV Show / Hide Code?

Mit dem folgenden Code kann ein Div angezeigt werden, wenn der Benutzer über einen Link fährt. Das Problem ist, dass die div nicht verschwindet, wenn der Benutzer den Link verlässt. Gibt es sowieso eine Möglichkeit, die Div zu deaktivieren, wenn der Benutzer den Link rollt. Der Benutzer kann jedoch den Cursor nach unten bewegen und mit Elementen in der Div interagieren. Jede Hilfe ist willkommen.

<!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>
<script type='text/javascript'> 
 /* <![CDATA[ */ 
document.getElementsByClassName = function(){ 
    if(arguments.length == 1) 
    arguments[1]='*'; 
  var retnode = []; 
  var myclass = new RegExp('\\b'+arguments[0]+'\\b'); 
  var elem = this.getElementsByTagName(arguments[1]); 
  for(var i = 0; i < elem.length; i++){ 
    var classes = elem[i].className; 
    if(myclass.test(classes)) 
      retnode.push(elem[i]); 
  }; 
  return retnode; 
}; 
window.onload=function(){ 
  var x = document.getElementsByClassName('HoverMe', 'a'); 
  for(var i = 0; i < x.length; i++){ 
    x[i].onmouseover=function(){ 
      var m = document.getElementsByClassName('HoverMe', 'a'); 
      var n = document.getElementsByClassName('showMe', 'div'); 
      for(var i = 0; i<m.length; i++){ 
        n[i].style.display = (m[i]==this)?'block':'none'; 
      }; 
    }; 
  }; 
  x = document.getElementsByClassName('showMe','div'); 
  for(var i = 0; i < x.length; i++){ 
    x[i].style.display = 'none'; 
  }; 
}; 
/* ]]> */ 
</script> 

</head>

<body>
<a class='HoverMe'>link 1</a><a class='HoverMe'>link 2</a>
<div class='showMe'>stuff 1</div><div class='showMe'>stuff 2</div>
</body>
</html>