javascript - レイアウトに影響を与えずにiframe内のホバー時に要素の輪郭を描く方法は?

Question

ホバー時にページの要素を強調表示したい。ページは iframe 内にあります。

css クラスを使用して青いアウトラインを表示しています。

.highlight {
   outline: 2px solid #08C !important;
}

試行 #1: ホバーした要素にクラスを追加する

まずホバーした要素にcssクラスを追加してみました。アウトラインが完全に見えるようにするために、周囲の要素の css 位置を「相対」に変更し、z-index 値で遊ぶ必要がありました。しかし、これは場合によってはレイアウトを壊します (たとえば、画像が次の行に移動します)。

問題: アウトラインが完全に表示されていないか、レイアウトが壊れています

試行 #2: ホバーされた要素の上に新しい DOM 要素を追加する

ページのデザインに影響を与えないようにするために、青い境界線を持つ新しい div を作成し、既存の要素の上に配置する方がよいと考えました。

これは、このフィドルで問題なく動作します: http://jsfiddle.net/aDGbX/1/

ただし、これまでのところ iframe 内ではありません。（輪郭はどこにも見えません）。

$(document).ready(function() {

 $('body').find(".hoverClass").bind("hover", function() {   
     thisId = $(this).attr('id');
    var pos = $('#'+thisId).offset();
     var w = $(this).width();
    var h = $(this).height();

    jQuery('<div/>', {
        id: 'highlighterDiv',
    }).appendTo('body');

    $("#highlighterDiv").css( {position: 'absolute', top: pos.top, left: pos.left, 'z-index': '99' } );
    $("#highlighterDiv").css( {width: w, height: h} );
    $("#highlighterDiv").addClass('highlight');
    $("#highlighterDiv").show();

 });

});
​

問題: これまで iframe 内で動作しない

質問：

2 回目の試みはより良い方法ですか? または何をお勧めしますか？