На родительской странице просто:
<style type="text/css">
.light {
background: #efefef;
}
.checked {
background: #9f9;
}</style>
Вот вся функция, которая вызывается при изменении src iframe:
function lightAnchors()
{
$('iframe#didacticfileContent').load(function()
{
$(this).contents().find('p').mouseover(function () {
if(typeof($(this).find('a').attr('name')) != 'undefined')
{
$(this).find('a').parents('p').addClass('light'); //css('background', '#eee');
$(this).find('a').parents('p').css('cursor', 'pointer');
}
});
$(this).contents().find('p').mouseout(function ()
{
if(typeof($(this).find('a').attr('name')) != 'undefined')
{
$(this).find('a').parents('p').removeClass('light');
}
});
$(this).findcontents().('p').click(function ()
{
if(typeof($(this).find('a').attr('name')) != 'undefined')
{
$(this).find('a').parents('p').toggleClass('checked');
}
});
});
}
(по коду: меняю цвет тега только в том случае, если внутри него есть тег a с установленным name)
Она работает, но в iframe не видны стили родительской страницы. Т.е. они применяются, но на внешний вид элементов не влияют, т.к. в iframe они не определены. (Не знаю важно это или нет, но iframe - это вполне себе веб-страница с <body> <html> и т.д...)