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取得了更好的成功，但它突出了我不想要的父母。

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中。

这是一个你应该能够轻松复制的工作小提琴。

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

Answer 2

我的问题有2个问题。

我的css错了。

错误

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

右

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

哈弗正在向父母冒泡。然而，Mouseenter和mouseleave工作了。

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

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

Answer 3

尝试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

对不起我想我误解了这个问题。这是一个更新的小提琴，可以在悬停时更改文本输入的值并更改边框颜色。

在iframe内容中的mouseenter mouseleave

3 个答案: