-1

在此先感谢并为我的英语感到抱歉。我对 Javascript 和 jQuery 很陌生。我的问题是，在 jsfiddle.net 中，jquery 无法正常工作，我不知道我在哪里做错了。

    <div class="holidayHoneymoonContent">
        <div class="holidayHoneymoonContent1"> <span id="lblSource">Delhi<span>
        <span>&nbsp;To&nbsp;</span>  <span id="lblDest">Shimla</span>

        </div>
        <div class="holidayHoneymoonContent2">
            <div style="float:left; width:142px;"> <span id="PicDesc">nwind yourself as we take you on a holiday to thr...</span>

            </div>
            <div style="float:left; width:63px;">
                <img ID="Rupee2" alt="" src="rupees.png" Width="8px" Height="8px" style="margin-left:8px;"
                /> <span id="PicPrice">10000</span>

                <br /> <span>(per person)</span>

            </div>
        </div>
        <div class="holidayHoneymoonBtn">
            <!--<img ID="Bookhere" onmouseover="bookHover(this)" onmouseout="bookOut(this)"
            src="bookHereBtn.png" class="bookHereBtn1" />-->
            <input id="inpBookHere" type="submit" value="Book Here" style="font-size:12px;width:80px;height:20px;"
            />
        </div>
    </div>

这是我在 jsFiddle 中的代码

4

2 回答 2

0

1.您需要像这样将元素与事件和功能绑定

$(element).on('mouseover',function(){
//code here
});

2.您需要使用 document.ready 以便像这样调用函数

$(document).ready(function(){

$(element).on('mouseover',function(){
//code here
});

});

3.您需要像这样在悬停功能中传递它

bookHover(this);

在这里演示http://jsbin.com/efopex/3/edit

于 2013-02-13T10:09:19.220 回答
0

试试这个

你的 HTML

<html>

    <head>
        <title></title>
    </head>

    <body>
        <div class="holidayHoneymoonContent">
            <div class="holidayHoneymoonContent1"> <span id="lblSource">Delhi<span>
            <span>&nbsp;To&nbsp;</span>  <span id="lblDest">Shimla</span>

            </div>
            <div class="holidayHoneymoonContent2">
                <div style="float:left; width:142px;"> <span id="PicDesc">nwind yourself as we take you on a holiday to thr...</span>

                </div>
                <div style="float:left; width:63px;">
                    <img ID="Rupee2" alt="" src="rupees.png" Width="8px" Height="8px" style="margin-left:8px;"
                    /> <span id="PicPrice">10000</span>

                    <br /> <span>(per person)</span>

                </div>
            </div>
            <div class="holidayHoneymoonBtn">
                <img ID="Bookhere" onmouseover="" onmouseout=""
                src="bookHereBtn.png" alt="Image" class="bookHereBtn1" />
                <input type="submit" value="Book Here" style="font-size:12px;width:80px;height:20px;"
                />
            </div>
        </div>
    </body>

</html>

Javascript

$(document).ready(function(){

    $('#Bookhere').mouseover(function() {
        alert("entering");
        bookId=this;
        $(bookId).parent().parent().animate({
            height: "109px",
            top: "68px"
        }, 200);
        $(bookId).parent().stop(true, true);
        $(bookId).parent().prev().prev(".holidayHoneymoonContent1").css("background", "#3FBA9E");
    });

    $('#Bookhere').mouseout(function() {
        bookId=this;
        $(bookId).parent().parent().animate({
            height: "80px",
            top: "96px"
        }, 200);
        $(bookId).parent().prev().prev(".holidayHoneymoonContent1").css("background", "#FFA455");
    });

});

检查小提琴http://jsfiddle.net/ZT6nu/13/

于 2013-02-13T10:20:37.070 回答