✔ Div Layer bei mouseover blocken

[rollerueckwaerts]

Hallo liebe Tutorials Gemeinde,
mit diesem Script schliße ich einen Layer sobald er mit der Maus berührt wird.

#root
{
    width:75%;
    height:50%;
    margin: 0px auto;
    text-align: left;
    color: #000000;
    background-color: #transparent;
    position:absolute;
    z-index:1;
}

#mouseoutframer {
	width:75%;
	height:50%;
	margin: 0px auto;
  background:#000000;
  z-index:2;
  position: absolute;
}



<script type="text/javascript">
Controller = {
 DIV_Box_MouseOut: function(){
  //your mouseout functionality
  this.closeFramer();
 },
 showFramer: function(){
   document.getElementById('mouseoutframer').style.display='block';
 },
 closeFramer: function(){
   document.getElementById('mouseoutframer').style.display='none';
 }
};
</script>



<div id="mouseoutframer" onmouseover="Controller.DIV_Box_MouseOut()"></div>
<div id="root" onmouseover="Controller.showFramer()"></div>

Das funktioniert soweit auch ganz gut. Leider flackert aber der Layer immer wieder auf, sobald der Bereich mit der Maus berührt wird ... nicht so schön

Wie kann ich es schaffen das der Layer wirklich ab der ersten Mausberührung geblockt bleibt ? Er soll dann nicht mehr erscheinen.

Hoffe jemand hat nen Tipp für mich.

Danke schonmal jetzt !!

 

[Quaese]

Hi,

du könntest eine boolesche Variable einführen, die du auf true setzt, um zu verhindern, dass ein erneutes Öffnen/Schliessen des Elements stattfindet.

Controller = {
 closed: false,
 DIV_Box_MouseOut: function(){
  //your mouseout functionality
  this.closeFramer();
 },
 showFramer: function(){
   if(!this.closed)
     document.getElementById('mouseoutframer').style.display='block';
 },
 closeFramer: function(){
   this.closed = true;
   document.getElementById('mouseoutframer').style.display='none';
 }
};

Ciao
Quaese

 

[rollerueckwaerts]

Das Forum hier ist der Hammer !!

Vielen Dank für den guten und schnellen Support