Javascript 对响应高度图像应用悬停效果

我有三列的布局。左栏和右栏是我需要悬停效果的完整背景图像。我无法在CSS中实现这一点，所以我尝试jQuery，但在位置方面我遇到了一个问题：两个元素上都是绝对的

这需要我在图像上加上一个高度，但我需要它来保持响应。我尝试了相对位置，但现在悬停时有明显的跳跃。这是我的小提琴：

下面是我的代码示例， html:

js:

我是个新手，如果有更好的CSS解决方案，我愿意接受任何建议

---

谢谢你的帮助。

我改变了你小提琴上的一些东西。问题是当你把东西淡出时，它们会消失，不透明度更好

我将覆盖图像放置在默认图像的上方，并将其设置为绝对，这样它将位于其上方，但在开始时隐藏

焦点在父div上，而不是图像，因为当您将其悬停时，它会消失。 玩玩它，看看你是否能理解我所做的，让我知道这是否是你一直在寻找的

$(document).ready(function(){
$('#rightUp').mouseenter(mouseEnterRight);
$('#rightOver').mouseleave(mouseLeaveRight);
$('#left').mouseenter(mouseEnterLeft);
$('#left').mouseleave(mouseLeaveLeft);

}))； var mouseEnterRight=函数（）{ $（'#rightUp'）.fadeOut（）； $（'#rightOver'）.fadeIn（）； } var mouseleaverlight=函数（）{ $（'#rightUp'）.fadeIn（）； $（'#rightOver'）.fadeOut（）； } var mouseenterfleft=函数（）{ $（'#leftUp'）。设置动画（{opacity:0}）； $（“#剩菜”）.fadeIn（）； } var mouseLeaveLeft=函数（）{ $（'#leftUp'）。设置动画（{opacity:1}）； $（“#剩菜”）.fadeOut（）； }

---

您只是想显示不同的图像吗？你需要淡入淡出吗？是的，它必须淡入相同大小的不同图像。我将发布一个例子。如果链接错误，现在应该可以了。你真的不需要使用javascript：看看这些使用CSS3的教程，这很完美。很好的方法，我完全理解。非常感谢你的帮助！谢谢，但是您应该查看Adjit的响应，并尝试是否可以使用转换修复它。Javascript是一个不错的解决方案，因为它覆盖了更多的浏览器，但仍然是。你可以在像div.left:hover img.over{}一样悬停的同时瞄准一个孩子祝你好运

.one-third {
    display:inline;
    float:left;
    width:33.332%;
    max-width: 420px;
    position: relative;
    min-height:10px;
    height:auto;
    max-height:900px;
    overflow:hidden;
}
.bg-image {
    position: relative;
    min-height:10px;
    height:auto;
    max-height:900px;
    overflow:hidden;
}
.bg-image img {
    display: block;
    width: 100%;
    max-width: 420px;
    min-height:10px;
    height:auto;
    max-height:900px;
    overflow:hidden;
}
#leftUp {
    position:relative;
    top:0;
    left:0;
}
#leftOver {
    position:relative;
    top:0;
    left:0;
}

$('#leftUp').mouseenter(mouseEnterLeft);
$('#leftOver').mouseleave(mouseLeaveLeft);
var mouseEnterLeft = function(){
    $('#leftUp').fadeOut();
    $('#leftOver').fadeIn();
}
var mouseLeaveLeft = function(){
    $('#leftUp').fadeIn();
    $('#leftOver').fadeOut();
}

$(document).ready(function(){
$('#rightUp').mouseenter(mouseEnterRight);
$('#rightOver').mouseleave(mouseLeaveRight);
$('#left').mouseenter(mouseEnterLeft);
$('#left').mouseleave(mouseLeaveLeft);