Fatal编程技术网
  • javascript/
  • Javascript iframe的悬停效果，图像未完全拟合

Javascript iframe的悬停效果，图像未完全拟合

javascript jquery html css iframe

Javascript iframe的悬停效果，图像未完全拟合,javascript,jquery,html,css,iframe,Javascript,Jquery,Html,Css,Iframe,我正在做标记，我试图在其中添加悬停效果。这段代码的真正作用是，当我把鼠标放在黄色框上时，它会变成青色和红色，每个框的高度垂直分割50%。然后我想添加一个图片怎么样，所以我只放了一个图片url，我注意到它不适合那个特定的区域。我试着改变大小或使位置绝对。。。但这一切都不管用 我的图像文件是这样的：' 这不适合那个特定的区域。那个么有并没有什么解决方案可以让我在悬停时得到那个特定区域的图像的完整大小 我尝试过的 我试过使用背景大小：100%100%但它也会像这样显示图像 这就是我想要的我刚刚编辑过

我正在做
标记，我试图在其中添加悬停效果。这段代码的真正作用是，当我把鼠标放在黄色框上时，它会变成青色和红色，每个框的高度垂直分割50%。然后我想添加一个图片怎么样，所以我只放了一个图片url，我注意到它不适合那个特定的区域。我试着改变大小或使位置绝对。。。但这一切都不管用

我的图像文件是这样的：'

这不适合那个特定的区域。那个么有并没有什么解决方案可以让我在悬停时得到那个特定区域的图像的完整大小

我尝试过的

我试过使用
背景大小：100%100%但它也会像这样显示图像



这就是我想要的我刚刚编辑过，向您展示了我想要的





我的代码分为三部分


  • 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>

    

    • 

    iframe独立于您的网站，您不能更改iframe的样式，因为您必须在原始网站中更改它。如果您与js在同一个域中，您可以尝试，但您可能会出现跨域错误。
    @janaspage有一些问题，我无法纠正它。。。但这把小提琴肯定会向你展示我所面临的工作和问题。@janaspage简单地说。。。我希望图像适合那个特定的小区域。。我不想变焦，我只想在半个区域显示完整的图像。。。当悬停效果开始时。。如果你可以建议任何编辑，那么你可以，我会接受的

    <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>