Question

我正在处理<iframe src>标签，我正在尝试添加悬停效果。这段代码的真正含义是，当我将鼠标放在黄色框上时，它会变为青色和红色，每个垂直分割50％高度。但后来我想如何添加一个图像，所以我只是推出一个图像网址，我注意到它不适合该特定区域。我尝试改变大小或使位置绝对......但是没有任何效果。

我的图片文件为：'http://upload.wikimedia.org/wikipedia/commons/1/11/Amanita_muscaria_After_Rain.jpg

哪个不适合该特定区域。所以有任何解决方案，在悬停时我可以在该特定区域获得该图像的完整尺寸。

我做了什么

我尝试过使用background-size: 100% 100%;，但之后也尝试了这样的显示图像。

enter image description here

这就是我想要的我刚刚编辑过来向您展示我想要的东西

enter image description here

我的代码分为三个部分

framehover.html

<html>
<body>
<p style="height: 50px;">Move the mouse pointer into the yellow box, then directly into    
the green box, 
then out of both boxes. No red or cyan should remain, only yellow and green.</p>
<iframe src="my.html" frameborder="0" height="300" scrolling="no" width="200"></iframe>
<iframe src="my2.html" frameborder="0" height="300" scrolling="no" width="200"></iframe>
</body>
</html>

my2.html - my.html和my2.html都是一样的，所以我只放这个。与background-color: red;

的my.html .outer区别开来

<html>
<head>
<style>
body { margin: 0px; }
.outer {
        margin: -100px;
    width: 400px;
        height: 500px;
    background-color: green;
}
.outer:hover {
        background-color: red;
}
.inner {

    visibility: hidden;
    width: 100%;
    height: 50%;
    background-image:url('http://upload.wikimedia.org/wikipedia/commons/1/11/Amanita_muscaria_After_Rain.jpg'); 

}
</style>
</head>

<body>
<div class="outer" 
     onmouseover="firstChild.style.visibility='visible'" 
     onmouseout="firstChild.style.visibility='hidden'"><div class="inner"></div></div>
</body>

Answer 1

iframe独立于您的网站，您无法更改iframe的样式，因为您必须在原始网站中更改它。如果您使用js在同一个域中，则可以尝试，但是您可能会出现跨域错误。

iframe的悬停效果，图像不完全适合

1 个答案: