jQuery change css of element in iframe on hover

Question

I'm making some modifications to the wordpress customizer. Essentially I have an accordion menu on the left of options to change the theme, on the right is an iframe that shows the theme and changes to display the options you select.

What I'm trying to do is when you hover over a menu sectino (say header options), then the border of the header in the iframe changes to red (to show that you are editing this area).

Here is my code at the minute:

$("#accordion-panel-header_section").hover(function() {
    $('.header-wrapper').css('border','5px solid red'); 
};

The tab in the parent window has an ID of 'accordion-panel-header_section' and the header in the iframe has a class of 'header-wrapper'.

Is it possible to make it so that when I hover over the menu item in the parent window, that I can change the css in the iframe??

Answer 1

You can do this, but not on that way you want, and just in case, when iframe is on the same domian, because of Same-origin policy

    $("#accordion-panel-header_section").hover(function() {
        $("#iframeid").contents().find(".header-wrapper").css('border', '5px solid red');
    };

Where #iframeid is you id of your iframe.