jQuery 在悬停时更改 iframe 中元素的 css

Question

我正在对 wordpress 定制器进行一些修改。本质上，我在选项左侧有一个 Accordion 菜单，用于更改主题，右侧是一个 iframe，显示主题和更改以显示您选择的选项。

我想做的是，当您将鼠标悬停在菜单部分(例如标题选项)上时，iframe 中标题的边框会变为红色(以表明您正在编辑此区域)。

这是我当时的代码:

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

父窗口中的选项卡具有“accordion-panel-header_section”的 ID，而 iframe 中的 header 具有“header-wrapper”类。

是否可以做到当我将鼠标悬停在父窗口中的菜单项上时，我可以更改 iframe 中的 css？

Answer 1

你可以这样做，但不是按照你想要的方式，以防万一，当 iframe 在同一个域上时，因为 Same-origin policy

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

#iframeid 是您的 iframe 的 ID。