on mousemove call a function

Looking for some assistance here... The goal is:

On page load, wait for 5 seconds, then from the list of children divs of parent "gridResponsive", select a random child div (one of those titled "grid-item", then perform a function (to fade in a child div within this randomly selected div - e.g. the "hovered" div). Wait 3 seconds, then fade out the child child div (e.g. "hovered"), wait another 5 seconds, then re-start this process - e.g. picking another random child div from the "gridResponsive" group - e.g. another "grid-item".

Any ideas? I can't seem to find a solution that works...

Thanks

See example HTML below:

<div class="gridResponsive">
<div class="gridinner">
<div class="grid-sizer" style="width: 1px;"></div>
<div class="grid-item width3"><div class="hovered" style="display: none;"><a title="" href="#"><p>Hover Text</p></a></div><img src="assets/images/home/grid/01.jpg" class="grid-itemImage"></div>
<div class="grid-item width2"><div class="hovered" style="display: none;"><a title="" href="#"><p>Hover Text</p></a></div><img src="assets/images/home/grid/02.jpg" class="grid-itemImage"></div>
<div class="grid-item width1"><div class="hovered" style="display: none;"><a title="" href="#"><p>Hover Text</p></a></div><img src="assets/images/home/grid/03.jpg" class="grid-itemImage"></div>
</div>
</div>