www.webdeveloper.com
Results 1 to 4 of 4

Thread: How to detect whether or not the cursor is inside a div?

  1. #1
    Join Date
    Jan 2009
    Posts
    6

    How to detect whether or not the cursor is inside a div?

    I want to detect the presence of the cursor inside a div, just giving a simple true or false return. However, I also need to detect the simultaneous onblur of a text box.

    So, I want to do this in theory:

    if(textbox.onblur && div.onmouseover)
    {
    function();
    }

  2. #2
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    The easy way:

    <div onMouseOver="javascript:mouseIsInside();" onMouseOut="javascript:mouseHasLeft();"></div>

    The harder way:

    set up an event to look for this, meaning you can keep your code semantic (i.e. free of styling and 'on' script events).

  3. #3
    Join Date
    Jan 2009
    Posts
    6
    That solves the problem of detecting whether or not the cursor is in the div, but I also, simultaneously, need to detect whether or not another unrelated textbox has focus.

  4. #4
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    How about something like this?


    Code:
    <script type="text/javascript">
    
    a=false
    
    function test(b){
    
    if(b&&!a){
    document.getElementById("div1").style.backgroundColor="#00AA00"
    }
    
    if(b&&a){
    document.getElementById("div1").style.backgroundColor="#AA0000"
    }
    
    }
    
    </script>
    
    <style>
    
    #div1{
    width:200px;
    height:150px;
    background-color:#00AA00;
    }
    
    </style>
    
    <div id="div1" onmouseover="test(true)" onmouseout="test(false)"></div>
    
    <BR><BR>
    
    <input type="text" id="t1" onfocus="new function(){a=true}" onblur="new function(){a=false}">
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles