jquery - この jQuery セレクターが機能しないのはなぜですか?

Question

JavaScript:

<script>

$('#aboutme').on('hover', function(){
    console.log("All the stuff");
    /* $("#aboutmedropdown").css("dispay","block"); */
});

</script>

HTML (今のところ css インライン):

            <div class="nav">
                <ul class="navlist">
                    <li style="position: relative;"><a href="#"><img src="/img/nav-home.png" alt="Navigation Home"></a></li>
                    <li style="position: relative;"><a href="#"><img src="/img/nav-about.png" id="aboutme" alt="Navigation About"></a>
                        <div id="aboutmedropdown" style="width: 150px; position: absolute; background-color: #FFFFFF;">
                            <ul style="list-style: none; padding: 0; margin: 0; border-bottom: 5px solid #8cc419;" class="sub_menu">
                                <li style="display: block; font-size: 16px; line-height: 20px; text-align: center; border-bottom: 1px solid #8cc419;"><a href="#" style="color: #8CC419;">About Me</a></li>
                                <li style="display: block; font-size: 16px; line-height: 20px; color: #8CC419; text-align: center; border-bottom: 1px solid #8cc419;"><a href="#" style="color: #8CC419;">Testimonials</a></li>
                            </ul>
                        </div>
                    </li>
                    <li style="position: relative;"><a href="#"><img src="/img/nav-yoga.png" alt="Navigation Yoga"></a></li>
                    <li style="position: relative;"><a href="#"><img src="/img/nav-pilates.png" alt="Navigation Pilates"></a></li>
                    <li style="position: relative;"><a href="#"><img src="/img/nav-fitness.png" alt="Navigation Fitness"></a></li>
                    <li style="position: relative;"><a href="#"><img src="/img/nav-media.png" alt="Navigation Media"></a></li>
                    <li style="position: relative;"><a href="#"><img src="/img/nav-fitcamp.png" alt="Navigation Fitcamp"></a></li>
                    <li style="position: relative;"><a href="#"><img src="/img/nav-blog.png" alt="Navigation Blog"></a></li>
                </ul>
            </div>

私は要素を調べており、ホバーする必要がある画像に適切な ID があることを非常に明確に確認しています -- #aboutme。

ページ ソースを表示すると<script>、 とjQueryの両方が読み込まれていることがわかります。

しかし、id の画像にカーソルを合わせてaboutmeも、コンソールには何も表示されません。

何か案は？