mouse over and mouseout on a div affected by child elements - how can i change this?

mouse over and mouseout on a div affected by child elements - how can i change this?

i'm creating a page with a full background picture. when the mouse enters the content area, the background image darkens. it then lightens up when the mouse moves out.

everything is working fine, but when the mouse moves over elements inside the content area, the background's opacity is also affected - goes lighter and then darker again.

i'm assuming this is happening because of my jquey code. when the mouse moves over a child element in the content area, jquery sees this as the mouse leaving and reentering the content area.

can this behaviour be changed?

an example of this can be seen here:

this is my jquery code:
  2. $("#contentframe").mouseover(function() {
  3. $("#background").fadeTo("fast", 0.33)
  4. });
  5. $("#contentframe").mouseout(function() {
  6. $("#background").fadeTo("slow", 1)
  7. });