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

when hovering on iframe, how do I trigger a class on element outside of iframe?

本文关键字：iframe 元素 悬停 鼠标 上时      更新时间：2023-09-26

我有一个带有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本身上。

$(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

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

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

如果不违反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>

相关文章：