Question

提前致谢并抱歉我的英语。我是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>

这是我的Code in jsFiddle

Answer 1

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

Answer 2

试试这个

您的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/

无法在jsfiddle.net中运行jquery

2 个答案: