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 取得了更好的成功，但是它突出显示了 parents 以及我不想要的。

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

尝试jQuery Hover

    $(function () {
        var iContent = $('#iframe').contents();
        iContent.find('#id_username').val("New Value!");
        iContent.find('#id_username').hover(function () {
            $(this).css("border", "1px solid red");
        }, function () {
            $(this).css("border", "1px solid #c4c7cb");
        });
        console.log(iContent.find('#id_username'));
    });

jsFiddle

抱歉，我想我误解了这个问题。这是更新的 fiddle 更改文本输入的值和更改悬停时的边框颜色。

Answer 2

.hover 的 css 规则在 iframe 上下文中不可见。使用 .css() 直接设置样式，添加 css 链接或使用 jQuery.

将主文档中的所有样式克隆到 iframe 中

这是一个有效的 jfiddle，您应该可以轻松复制它。

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

Answer 3

我的问题有 2 个问题。

我的css错了。

Wrong

.highlight :hover { 
  outline:4px solid #f00;
}

Right

.highlight {  
  outline:4px solid #f00; 
}

悬停冒泡到 parents。然而，Mouseenter 和 mouseleave 起作用了。

var $iframe = $("#iframe").contents(); 

$iframe.find('*').mouseover(function (e) {
    $(e.target).addClass('highlight');
}).mouseout(function (e) {
    $(e.target).removeClass('highlight');
});

mouseenter mouseleave 在 iframe 的内容中

mouseenter mouseleave within contents of iframe

javascript

jquery

iframe

mouseover

mouseenter