javascript - ロード時のホバーが機能しない

Question

デモ: http://jsbin.com/afixay/3/edit

1) 赤いボックスの上にカーソルを置きます

2) カーソルを動かさずに ctrl+r を押してください (ページをリロードする必要があります)

3) アラートが表示されません。

ホバーを解除/ホバーして戻すと、アラートが表示されます。問題は、ページの読み込み時にカーソルが赤いボックスの上に置かれると、hoverイベントが発生しないことです (また、ありませんmouseenter)。

これを修正するにはどうすればよいですか?

ブラウザの動作は正しいようですが、ページの読み込み時であっても、要素がホバーされているかどうかを知る必要があります。

$(function() {
  function hovered(e){
      e.type == 'mouseenter' ? alert('on') : alert('off'); 
  }

  $('.box').hover(hovered);
});