Question

尝试使用JQuery时遇到了一些问题。

以下是我希望在我的网页上开展工作的代码：

但它在我的页面上不起作用：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
    $(document).ready(function() {
        $('.timeline').hover(function() {
            $(this).css('background-color', 'blue');
        }, function() {
            $(this).css('background-color', 'cyan');
        });
    });
</script>

<section id="eduandwork" style="top:20%; bottom:20%; height:100%; width:100%; text-align:center;">
    <div class="container hidden-xs">
        <ul class="timeline">
            <li class="timeline-inverted">
                <div class="timeline-panel">
                    <div class="timeline-heading">
                        <h5 class="timeline-title"><br><br>IT MANAGEMENT BACHELOR</h5>
                    </div>
                    <div class="timeline-body">
                        <p>2014 - 2019</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</section>

这是我的代码。

编辑：说它不起作用，我的意思是当我悬停元素时，它不会改变任何东西。

Answer 1

您的脚本标记应如下所示：这是你的答案：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.timeline').hover(function() {
        $(this).css('background-color', 'blue');
    }, function() {
        $(this).css('background-color', 'cyan');
    });
});
</script>

<section id="eduandwork" style="top:20%; bottom:20%; height:100%; width:100%; text-align:center;">
    <div class="container hidden-xs">
        <ul class="timeline">
            <li class="timeline-inverted">
                <div class="timeline-panel">
                    <div class="timeline-heading">
                        <h5 class="timeline-title"><br><br>IT MANAGEMENT BACHELOR</h5>
                    </div>
                    <div class="timeline-body">
                        <p>2014 - 2019</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</section>

Answer 2

在Jquery调用结束时，添加一个结束脚本标记，然后开始一个新标记。

在您的初始脚本调用中，您指定了一个来源＆＃34; src =＆＃39; blah＆＃39;＆＃34;。如果您在第二个脚本或页面文件中在页面上内联运行代码，它将成功运行。

如果你先调用jquery，然后用你的代码运行第二个脚本，你的悬停就可以了。

http://jsfiddle.net/mPawlak/heczLkxd/

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><script>
$(document).ready(function() {
    $('.timeline').hover(function() {
        $(this).css('background-color', 'blue');
    }, function() {
        $(this).css('background-color', 'cyan');
    });
});

JQuery：悬停不起作用

2 个答案: