Question

I have this code :

function move() {

    $(document).mousemove(function(e){
         var x = e.pageX;
        $('.linkHover').animate({'right': '=' + x + 'px'}, 'slow'); 
   }); 


    }

and the HTML is :

<div style="position: relative">
    <ul class="linksColl">
        <li><a href="#"><img onmouseover="move()" src="images/links/communicate.png" alt="" width="175" height="78" border="0" /></a></li>
        <li><a href="#"><img onmouseover="move()" src="images/links/library.png" alt="" width="125" height="79" border="0" /></a></li>
        <li><a href="#"><img onmouseover="move()" src="images/links/memory.png" alt="" width="176" height="78" border="0" /></a></li>
        <li><a href="#"><img onmouseover="move()" src="images/links/discussions.png" alt="" width="137" height="78" border="0" /></a></li>
        <li><a href="#"><img onmouseover="move()" src="images/links/about.png" alt="" width="126" height="78" border="0" /></a></li>
        <li><a href="index.php"><img onmouseover="move()" src="images/links/articles.png" alt="" width="125" height="78" border="0" /></a></li>
    </ul>
    <div class="linkHover"></div>
</div>

I want to change the position for DIV with class linkHover when mouse over header links but it’s not working.

How I can let the linkHover DIV follow mouse cursor when become on linksColl DIV?

NOTE : I want to follow only horizontal not vertical

Answer 1

SzamDev,

Try this JS

function move() {    
    $(document).mousemove(function(e){
        var x = e.pageX;
        $('.linkHover').animate({right:x}, 'slow'); 
    }); 
}

also, if I understand you right, I did something very similar. Try plotting the X co-ord for each LI, then adding to an array, With the mouse over, set a JS call with an index of the li you wish to animate to. This worked perfectly for me.

var dotLocations = [0, 55, 170, 290, 410];
    function showFeature(a) {
        $("#featureDot").animate({
            left: dotLocations[a]
        }, 150, function () { /* animation complete */ });
    } 

In this example the featureDot was a div with a small red dot in it, when “showFeature” was called the dot moved to be located under the li/button I clicked/hovered.

Hope this helps,

Chris.