JQuery：悬停不起作用

Question

I have a little problem trying to use JQuery.

Here's the code I would like to make work on my page :

http://jsfiddle.net/ktz0f6st/

But it doesn't work on my page :

<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>

This is my code.

EDIT : By saying it doesn't work, I mean when I hover the element, it doesn't change anything.

Answer 1

Your script tag should look like those below: Here is your answer:

<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

At the end of your Jquery call add in an end script tag, then start a new one.

In your initial script call you specify a source "src='blah'". If you run your code inline on the page in a second script or in your page's files it will run successfully.

If you call jquery first, then run a second script with your code, your hover works just fine.

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');
    });
});