mouseenter mouseleave within contents of iframe

Question

I'm trying to highlight elements within a iframe with no success. I've tried using mouseenter/mouseleave with no success. It does not fire.

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

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

I've had better success with mousemove however it highlights the parents as well which I don't want.

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

My problem had 2 issues.

1. My css was wrong.

   Wrong

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

   Right

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

2. Hover was bubbling up to the parents. Mouseenter and mouseleave worked however.

   var $iframe = $("#iframe").contents(); 
   
   $iframe.find('*').mouseover(function (e) {
       $(e.target).addClass('highlight');
   }).mouseout(function (e) {
       $(e.target).removeClass('highlight');
   });