JSFiddle - React, Tailwind, and code Playground

by danmana

HTML

<iframe id="source" src="http://fiddle.jshell.net"></iframe>

CSS

#source{
    border: 1px solid red;
}

//this css class is not visible in the iframe
.hover{
    color:red;
}

JavaScript

var doc = window.frames['source'].document;

//only this css style will be visible in the iframe
$('head', doc).append('<style type="text/css">.hover{background-color:#fdd;}</style>');



$(doc).ready(function() {
    $('body').prepend('This is outside the iframe<br>');
    $('body', doc).prepend('This is inside the iframe <b>hover me</b><br>');
    $('body', doc).delegate('*', 'hover', function() {
        $(this).addClass('hover');
        $(this).css('textDecoration', 'underline');
    });
    $('body', doc).delegate('*', 'mouseout', function() {
        $(this).removeClass('hover');
        $(this).css('textDecoration', 'none');
    });
});