Solved

jQuery Selector & Exclusion

Posted on 2009-06-30
3
597 Views
Last Modified: 2012-05-07
I have the following codes, basically the alert should only fire if the user moves the cursor outside of the main box, it should never fire inside even when switching hover between div's inside the main box. That's why I tried :not(#main *), but that doesn't seem to work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<title>Test Page</title>

		<style>

			#body-content

			{

				margin:50px 0px; 

				padding: 0px;

				text-align: center;

			}

			

			#main {

				width:800px;

				height: 500px;

				margin:0px auto;

				text-align:left;

				padding:15px;

				border:1px dashed #333;

				background-color:#eee;

			}

			

			#navbar {

				background-color: #cc0000;

				margin-bottom: 250px;

			}

		</style>

		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

		<script>

			$(document).ready(function(){		

				$("*:not(#main *)").mouseover(function(){

					alert("mouse out");

				}, function() {});

			});

		</script>

	</head>
 

	<body id="body-content">

		<div id="main">	

			<div id="navbar">

				Heres the navigation bar menu....

			</div>

			<div id="box">

				Heres some content in the box....

			</div>

		</div>

	</body>

</html>

Open in new window

0
Comment
Question by:jwzk
  • 2
3 Comments
 
LVL 9

Accepted Solution

by:
Lakio earned 500 total points
ID: 24752670

Use mouseleave
http://docs.jquery.com/Events/mouseleave
or hover( I think that also works )
http://docs.jquery.com/Events/hover
0
 

Author Comment

by:jwzk
ID: 24753301
Wow, didn't know that existed. Mouseleave is exactly what I was looking for, thanks!
0
 

Author Closing Comment

by:jwzk
ID: 31598652
Exactly what I was looking to do
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now