iframe内的img和悬停效果[重复]答案

【问题标题】：img inside iframe and hover effect [duplicate]iframe内的img和悬停效果[重复]
【发布时间】：2014-03-24 00:13:36
【问题描述】：

我对 <iframe> 内的元素的悬停效果有疑问。

iframe 中的代码，在domainA.com

<!doctype html>
<html>
  <head>
      <meta charset="utf-8">
      <style>
          img:hover {
            opacity: 0.5;
          }
      </style>
 </head>
 <body>
     <img src="/image1.jpg">
     <img src="/image2.jpg">
     <img src="/image3.jpg">
 </body>
</html>

第二个网站domainB.com

<iframe src="domainA.com/iframe.html">

当我在 domainB 中嵌入 iframe 时，悬停效果不起作用。有没有办法以某种方式解决它？我无权访问 domainB.com 的代码（其他开发者会将 iframe 放在那里）

【问题讨论】：

你必须在原始页面中写下这个CSS property。您不能直接将CSS 注入iframe。
嗯，但是如果我无法访问原始页面怎么办？ iframe 不在同一个域来源
@Astaz3l 如果原点不同，则不可能。
;/ 例如可以通过 js 来完成吗？鼠标悬停之类的？
@Astaz3l 如果iframe 和parent 页面的原始域相同，则可以通过js 完成。如果确实需要从iframe 和append 提取文本到您的parent 页面

标签： html css iframe

【解决方案1】：

如果你想要这个效果，你应该把这个 css 链接到你的 iframe 中。

a.html:

<html>
<body>
<iframe src="b.html" ></iframe>
</body>
</html>

b.html:

<html>
<head>
<style>
img:hover{
   opacity: 0.5;
}
</style>
</head>
<body>

<img src="xx.jpg" />
</body>
</html>

否则使用 javascript 来执行此操作...例如：

$(document.getElementById('Iframe_id').contentWindow.document.body).find("image").mouseover(function(){
   alert("do what you want here");
});

确保此代码在 $(documet).ready(); 内

【讨论】：

iframe 不在同一个域来源，他无法访问原始页面
@Deadlock，他之前没提过，那他可以用javascrpt
@RayCheng 你能给我任何提示如何实现吗？我无权访问父页面代码
@Astaz3l，我会更新我的答案，请检查..
@RayCheng 很酷，但问题是我无法向父窗口代码添加任何内容。因此，如果可能的话，必须从 iframe 内部完成 + 它不在同一个域中，因此 contentWindow 将不起作用