gpt4 book ai didi

javascript - 悬停在 iframe 上时,如何在 iframe 外部的元素上触发类?

转载 作者:太空宇宙 更新时间:2023-11-04 02:28:10 26 4
gpt4 key购买 nike

我有一个带 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

关于javascript - 悬停在 iframe 上时,如何在 iframe 外部的元素上触发类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36990298/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com