0

I have a problem with hover effect on elements that are inside <iframe>.

Code inside iframe, it's in 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>

And second website on domainB.com

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

When i embed iframe in domainB hover effect doesn't work. Is there any way to solve it somehow? I don't have access to code of domainB.com (other developer will put iframe there)

Astaz3l
  • 986
  • 8
  • 23
  • You have to write this `CSS property` in original page. You cannot inject `CSS` to `iframe` directly. – Deadlock Feb 22 '14 at 09:01
  • Hmm, but what if i don't have access to original page? Iframe is not in the same domain origin – Astaz3l Feb 22 '14 at 09:02
  • @Astaz3l Then its not possible if origin is not same. – Deadlock Feb 22 '14 at 09:02
  • ;/ could this be done via js for instance? kind of mouseover or something? – Astaz3l Feb 22 '14 at 09:03
  • @Astaz3l it can be done via js if origin domain of `iframe` and `parent` page is same. If its really required extract text from `iframe` and `append` it to your `parent` page – Deadlock Feb 22 '14 at 09:05
  • @Deadlock problem is that i'm providing iframe and i don't have access to parent page code – Astaz3l Feb 22 '14 at 09:32
  • @Astaz3l I know you don't have access. What I am saying is to scrape required text with `js` if its `DOM` structure is fixed. – Deadlock Feb 22 '14 at 09:35
  • @Deadlock not sure if i understand. Could you provide any snippet or something? – Astaz3l Feb 22 '14 at 09:36

1 Answers1

1

If you want this effect work,you should link this css to inside your 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>

Otherwise use javascript to do this...like:

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

Be sure this code is inside $(documet).ready();

aksu
  • 5,163
  • 5
  • 22
  • 38
Raymond Cheng
  • 2,275
  • 18
  • 32