我有一个带 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');
});
});
关于javascript - 悬停在 iframe 上时，如何在 iframe 外部的元素上触发类？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36990298/