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}">

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