Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2010
    Posts
    290
    Thanks
    63
    Thanked 8 Times in 8 Posts

    onmouseout not always working

    I have a test peice of html is set up roughly like this:

    Code:
    <div id="bill" onmouseover="javascript: show('bob'); hide('bill');">
      <h1>Bill says hi</h1>
    </div>
    <div id="bob" style="visibility:hidden; display:none;" onmouseout="javascript: show('bill'); hide('bob');">
      <h1>Bob says hi</h1>
    </div>
    And my javascript looks like this:

    Code:
    function show(elemId) {
      elem = document.getElementById(elemId);
      elem.style.visibility = "visible";
      elem.style.display = "block";
    }
    
    function hide(elemId) {
      elem = document.getElementById(elemId);
      elem.style.visibility = "hidden";
      elem.style.display = "none";
    }
    You can see what it does from the code: When the page loads, it shows the text Bill says hi. When you move the mouse over the text, it changes to Bob says hi. When you move the mouse away from the text, it reverts to Bill says hi.

    BUT - this only seems to work consistently when the mouse is moved away from the text at slow speed - if you pull the mouse away quickly, it sometimes gets stuck on Bob says hi.

    Any ideas why?
    Last edited by XmisterIS; 01-05-2012 at 05:13 PM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,885
    Thanks
    56
    Thanked 539 Times in 536 Posts
    hmmm... seems to be worse in IE, but that's no surprise. And it's worth noting that the div goes the width of the page, so up and down is the only mousemove that you should be testing with. Fwiw, the code can be simplified somewhat:

    Code:
    <body>
    <div id="bill" onmouseover="show('bob', 'bill');">
      <h1>Bill says hi</h1>
    </div>
    <div id="bob" style="display:none;" onmouseout="show('bill', 'bob');">
      <h1>Bob says hi</h1>
    </div>
    <script type="text/javascript">
    function show(one,two) {
      document.getElementById(one).style.display = "block";
      document.getElementById(two).style.display = "none";
    }
    
    </script>
    </body>

  • #3
    Regular Coder
    Join Date
    Jun 2010
    Posts
    290
    Thanks
    63
    Thanked 8 Times in 8 Posts
    Yes, I know, TBH you could have a stylesheet that sets the width and position of the DIV, whatever, but it doesn't fix the problem though!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •