开发者

Hover Event using JQuery

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!


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜