javascript - mouseenter mouseleave 在 iframe 的内容中

Question

我试图突出显示 iframe 中的元素，但没有成功。我尝试使用 mouseenter/mouseleave 但没有成功。它不会触发。

$('#iframe').contents().mouseenter(function (e) {
    //var element = $(e.target);
    var element = $(this);

    $(element).addClass("highlight");
}).mouseleave(function (e) {
    $(element).removeClass("highlight");
});

我在 mousemove 方面取得了更好的成功，但是它也突出了我不想要的 parent 。

var prevElement;
$('#iframe').contents().find('html').on('mousedown', function (e) {
    e.stoppropagation()
    //e.preventDefault - did not work either
    var element = $(e.target);


    if (prevElement == null) {
        prevElement = element;
        element.addClass("edit-element-selector");
    }
    else {
        if (prevElement != element) {
            prevElement.removeClass("highlight");
            //prevElement.parents().removeClass("highlight"); did not work
            element.addClass("highlight");
        }   
    }
});

HTML

<iframe id="iframe" srcdoc="@Html.Raw(ViewBag.html)"></iframe>

Answer 1

.hover 的 css 规则在 iframe 上下文中不可见。 要么使用 .css() 直接设置样式，添加 css 链接，要么使用 jQuery 将主文档中的所有样式克隆到 iframe 中。

这是一个工作 jfiddle，您应该可以轻松复制它。

http://jsfiddle.net/danmana/pMBw2/