Hover Event using JQuery

Question

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!

have you checked what is in cls? perhaps adding a case else statement would be useful for testing? also, a console.log(cls) could help — nathan gonzalez
– nathan gonzalez, Commented Jun 11, 2010 at 18:42
Using the code you provided, it works for me in Firefox. jsfiddle.net/dxZnT (no images, of course) — user113716
– user113716, Commented Jun 11, 2010 at 18:51
I installed firefox on a mac (this is a pc) and ran the code and the quote marker is not animating with the hover. The paragraph text is changing but quote marker is not moving. — Doug Molineux
– Doug Molineux, Commented Jun 11, 2010 at 18:59
cls is defined in the jsFiddle I posted, and the marker is moving. Was the jsFiddle working for you? I'm using the latest Firefox on Mac. — user113716
– user113716, Commented Jun 11, 2010 at 19:09
Strange. Of course, the only evidence of it moving will be the scrollbar changing. Here's an update where I gave hover() its second function (it is meant to have two) that returns the margin to 0. Also, I placed an "X" to give the marker some visibility. jsfiddle.net/dxZnT/2 — user113716
– user113716, Commented Jun 11, 2010 at 19:15

user113716 · Accepted Answer · 2010-06-11 20:45:26Z

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.

answered Jun 11, 2010 at 20:45

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Hover Event using JQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related