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

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/

Answer 2

我的问题有 2 个问题。

1. 我的 css 错了。

   错了

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

   对

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

2. Hover 正在向父母冒泡。但是，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

抱歉，我想我误解了这个问题。这是一个更新的小提琴，它改变了文本输入的值并在悬停时改变了边框颜色。