может быть продублировать элементы которые анимированы под полупрозрачным png
поместить такие же по размеру и расположению элементы сверху, но сделать их прозрачными
и обработчики событий мыши назначить на них
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<meta charset=utf-8 />
<title>test</title>
<style>
.anim { position: absolute;
top: 0; left: 0; width: 20px; height: 20px;
background: red;
}
.anim.top { /* вверху */
background: transparent;
cursor: pointer;
}
.blue { background: blue; }
img { position: absolute; opacity: .5; left: 0; top: 0;}
</style>
</head>
<body>
<div class=anim></div> <!-- это элемент под картинкой -->
<img src=http://placehold.it/200>
<div class="anim top"></div> <!-- это выше -->
<script>
var $anim = $('.anim');
function anim () {
var x = Math.random() * 180,
y = Math.random() * 180;
$anim.animate({ left: x, top: y}, 4000, anim); // анимируем оба элемента одинаково
}
$('.top').mouseenter(function () { // вешаем обработчик на верхний
$anim.first().toggleClass('blue'); // меняем нижний
});
anim();
</script>
</body>
</html>
