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

Моя проблема была 2 вопроса.

1. My 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 2

Попробуйте 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

К сожалению, я предполагаю, что я неправильно понял вопрос. Вот обновленная скрипка, изменяющая значение ввода текста и изменяя цвет границы при наведении.

Answer 3

Правило css для .hover не отображается в контексте iframe. Либо используйте .css(), чтобы напрямую установить стиль, добавить ссылки css или клонировать все стили в основном документе в iframe с помощью jQuery.

Вот рабочий jfiddle, который вы легко сможете копировать.

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