2

我希望在悬停时突出显示页面的元素。该页面位于 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 中工作

问题：

第二次尝试是更好的方法吗？或者你会推荐什么？

4

0 回答 0