如何在html中调用外部javascript函数/行？

Question

在javascript文件中我有这段代码：

    $(function() {

    $('#carousel span').append('<img src="img/gui/carousel_glare.png" class="glare" />');
    $('#thumbs a').append('<img src="img/gui/carousel_glare_small.png" class="glare" />');
    $('#carousel').carouFredSel({
        responsive: true,
        circular: false,
        auto: true,
                infinite: true,
        items: {
            visible: 1,
            width: 200,
            height: '56%'
        },
        scroll: {
            fx: 'directscroll',
                        pauseOnHover: true,
                        duration: 500
        }
    });

    $('#thumbs').carouFredSel({
        responsive: true,
        circular: false,
        infinite: false,
        auto: false,
        prev: '#prev',
        next: '#next',
        items: {
            visible: {
                min: 2,
                max: 6
            },
            width: 150,
            height: '66%'
        }
    });

    $('#thumbs a').click(function() {
        $('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
        $('#thumbs a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    });

});

我想在pauseOnHover执行时会在html文件中发生某些事情。 在html文件中，我已经包含了javascript文件：

<script src="java_script.js"></script>

还为测试添加了一些样式代码：

<style>.container {
    background: rgb(170, 187, 97);
    background: rgba(170, 187, 97, 0.5);
}</style>

当在javascript文件中执行pauseOnHover时，我想在屏幕上显示html文件中的这两行：

<div class="container">Lorem ipsum dolor</div>
<div class="container">Lorem ipsum_for_testing dolor</div>