Hover Event using JQuery

Question

Hi Everyone! I am trying to get a "marker" to move when the user hover overs a certain here's my code:

$(document).ready(function(){
        $("#icondesc a").hover(function(){
            var cls = $(this).attr("class");
            $(this).siblings("p").hide();
            $(this).siblings("p."+ cls + "_qu").show();
            if(cls == "talk1"){
                marginleft = "415px";
            } else if (cls == "talk2"){
                marginleft = "535px";
            } else if (cls == "talk3"){
                marginleft = "655px";
            } else if (cls == "talk4"){
                marginleft = "777px";
            } else if (cls == "talk5"){
                marginleft = "893px";
            }

            $("#quote_marker").animate({"margin-left": marginleft});
        });
});

and here's what my icondescription div looks like

`
<div id="icondesc">

                    <a class="talk5" href="services/solutions/index.php#energyanchor">
                    <img src="img/homeblue.png" alt="homeicon" class="icons">
                    </a><a class="talk4" href="services/solutions/index.php#fleetanchor">
                    <img src="img/truckblue.png" alt="fleeticon" class="icons">
                    </a><a class="talk3" href="services/solutions/index.php#medicalanchor">
                    <img src="img/medicalblue.png" alt="medicon" class="icons">
                    </a><a class="talk2" href="services/solutions/index.php#deviceanchor">
                    <img src="img/radioblue.png" class="icons" alt="radioicon">
                    </a><a class="talk1" href="services/solutions/index.php#transanchor">
                    <img src="img/busblue.png" class="icons" alt="transicon">
                    </a>

<p class="talk1_qu">Transportation</p>
<p class="talk2_qu" style="display:none;">Devices</p>
<p class="talk3_qu" style="display:none;">Medical</p>
<p class="talk4_qu" style="display:none;">Fleet Management</p>
<p class="talk5_qu" style="display:none;">Energy</p>

<span id="quote_marker"></span>
</div>
`

So, quote_marker just has a background-image and the margin-left IS defined in the CSS. Also, Position is set to absolute.

firebug is telling me marginleft is not defined. any advice would help!

Answer 1

After testing the hosted page, it appears as though using marginLeft instead of 'margin-left' fixes the problem.

You're also using jQuery 1.3.2 instead of 1.4.2. Maybe that factors in?

Anyway, I have no idea why that form of margin left doesn't work on your page when it does in jsFiddle, but that seems to be the fix.