Question

我对<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放在那里）

Answer 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();

内

img里面的iframe和悬停效果

1 个答案: