Javascript & HTML: заставить onmouseover работать для div, а не на переднем плане?

У меня есть коллекция divs, устроенная таким образом:

<div id="main">
   <div id="background"></div>
   <div id="foreground">
       <div id="foreground_element1></div>
       <div id="foreground_element2></div>
   </div>
</div>

Фоновый div должен находиться за передним div. И фон div больше, чем на переднем плане; передний план плавает поверх него. То, что я хочу сделать, - это когда есть действие onmouseover для div фона, я хочу запустить функцию JavaScript.

Проблема в том, что onmouseover не сигнализируется, если мышь находится на области переднего плана, хотя фоновый div все еще существует в этом пространстве, он просто за передним планом. Это проблема.

Я попытался обойти это, поставив свою желаемую функцию на основную мышью div, но когда мышь перемещается из фонового div в div переднего плана, происходит одновременное событие mouseout и mouseover, что заставляет мою функцию работать дважды, когда я только хотите, чтобы он запускался один раз. И есть еще больше осложнений, потому что передняя панель div также имеет вложенные элементы, которые снова запускают комбинацию mouseout и mouseover.

Есть ли способ сделать работу onmouseover для полного фонового div? Или есть какой-то другой триггер, который я должен использовать?