Problem z kodem DIV Show / Hide?

Question

Aug 11, 2012, 08:34 PM

Problem z kodem DIV Show / Hide?

Poniższy kod pozwala na pojawienie się div, gdy użytkownik przewinie łącze. Problem polega na tym, że div nie znika, gdy użytkownik wyłącza łącze. Czy mimo to możemy zrobić to tak, że gdy użytkownik przetoczy link, div zniknie, ale użytkownik nadal będzie mógł obniżyć kursor i wejść w interakcję z elementami w div ..... każda pomoc byłaby doceniana.

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