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

【问题标题】：when hovering on iframe, how do I trigger a class on element outside of iframe?悬停在 iframe 上时，如何在 iframe 之外的元素上触发类？
【发布时间】：2016-05-02 19:35:07
【问题描述】：

我有这个带有 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 可以看出，这些都不起作用。我不知道该怎么办。让我知道你将如何解决这个问题。

【问题讨论】：

如果您服务器上的 iframe 或者它是您无法控制的外部页面？
从技术上讲，它是我网络（子域）上网站的 iframe。我确实将 $iframe 更改为 iframe 但没有运气
var $iframe 应该是 var iframe...这是一个原因... :) javascript 变量名只能以字母或下划线开头
修复了这个但没有爱。

标签： javascript jquery css iframe hover

【解决方案1】：

这应该是你需要的。无需定位 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

【讨论】：

接受这个，因为你包含了一个 plnkr。它总是有点方便。我唯一的问题是它适用于我的 plnkr 示例，但不适用于我的真实环境。我不确定为什么。还在想办法。

【解决方案2】：

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

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

【讨论】：

【解决方案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>

【讨论】：

如果我们有不同的起源并想实现这个解决方案，你能给我一个建议吗？