Javascript mouseenter mouseleave在iframe的内容中

我试图突出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

试试看

---

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

的

css

规则。悬停在iframe的上下文中不可见。 使用.css（）直接设置样式、添加css链接或使用jQuery将主文档中的所有样式克隆到iframe中

这是一把可以使用的小提琴，你应该可以很容易地复制它

---

我的问题有两个

我的css是错的

错

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

对

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

哈弗正在向父母招手。然而，穆塞纳和穆塞莱夫起了作用

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

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

---

收到你的html了吗？@DomAdams添加了html。没有太多。它实际上只是一个iframe。不幸的是，它不起作用。它告诉我我正在iframe上悬停，但没有获取其中的元素。我不能使用find（），因为它不限于元素。我确实尝试了

$iframe.find（'*'）.hover（function（）{…

，它改变了元素的边框，但也改变了我不想要的父元素。谢谢，但我仍然无法让它工作。Tt与css没有任何关系。悬停只会触发iframe中内容的html元素，而不会触发其中的任何其他元素。

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

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

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