在iframe上悬停时，如何在iframe之外的元素上触发类？

Question

我有一个带有iframe的页面。 我想在iframe之外的元素上触发一个悬停类。 它不是父包装器，只是iframe之外DOM中完全不同的div。

的HTML：

  <body>

    <div class="a6-expander-wrapper"></div>
    <div class="some-other-div"></div>
    <iframe title="My-Iframe" src="//example.com"></iframe>

  </body>

CSS：

.a6-expander-wrapper-hover {
    opacity: 1 !important;
}

.a6-expander-wrapper {
      height: 44px;
    width: 44px;
   background-color:red;
   opacity: 0;
}

我当前正在使用的jQuery：

var $iframe = $('iframe[title="My-Iframe"]').contents(); 
var hoverItem = $('.a6-expander-wrapper');

$iframe.find('*').mouseover(function () {
    hoverItem.addClass('a6-expander-wrapper-hover');
}).mouseout(function () {
    hoverItem.removeClass('a6-expander-wrapper-hover');
});

这是plnkr： http ://plnkr.co/edit/2WONkAijTzF2BBsh3p9H?p=preview

从plnkr可以看出，这些都不起作用。 我不确定该怎么办。 让我知道您将如何解决这个问题。

Answer 1

如果我对您的理解正确，那么当用户将鼠标悬停在iframe上时，您想运行一些代码。
为此，您可以使用以下代码（将其添加到您的代码中之后）：

  $('iframe[title="My-Iframe"]').mouseover(function(){
    hoverItem.addClass('a6-expander-wrapper-hover');
  }).mouseout(function(){
    hoverItem.removeClass('a6-expander-wrapper-hover');
  });

Answer 2

这应该是您所需要的。 无需定位iFrame内容，然后选择其中的所有内容。 您可以将鼠标悬停在iFrame本身上。

$(function () {
    var iframe = $('iframe[title="My-Iframe"]'); 
    var hoverItem = $('.a6-expander-wrapper');
    $(iframe).mouseover(function () {
        hoverItem.addClass('a6-expander-wrapper-hover');
    }).mouseout(function () {
      hoverItem.removeClass('a6-expander-wrapper-hover');
    });
});

工作示例： http : //plnkr.co/edit/pJdtn9fX8HT9KWSvrOcW?p=preview

Answer 3

如果不违反Same-origin_policy，则解决方案是：

 $(function () { var iframe = $('iframe[title="My-Iframe"]'); var hoverItem = $('.a6-expander-wrapper'); iframe.hover(function () { hoverItem.addClass('a6-expander-wrapper-hover'); }, function () { hoverItem.removeClass('a6-expander-wrapper-hover'); }); });

 .a6-expander-wrapper-hover { opacity: 1 !important; } .a6-expander-wrapper { height: 44px; width: 44px; background-color:red; opacity: 0; } iframe { width: 500px; height: 300px; }

 <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <div class="a6-expander-wrapper"></div> <div class="some-other-div"></div> <iframe title="My-Iframe" src="xx.html"></iframe>

在iframe上悬停时，如何在iframe之外的元素上触发类？

问题描述

3 个解决方案

解决方案1
1 2016-05-02 19:58:20

解决方案2
1 已采纳 2016-05-02 19:59:55

解决方案3
0 2016-05-02 20:01:53

在iframe上悬停时，如何在iframe之外的元素上触发类？

问题描述

3 个解决方案

解决方案1 1 2016-05-02 19:58:20

解决方案2 1 已采纳 2016-05-02 19:59:55

解决方案3 0 2016-05-02 20:01:53

解决方案1
1 2016-05-02 19:58:20

解决方案2
1 已采纳 2016-05-02 19:59:55

解决方案3
0 2016-05-02 20:01:53