将悬停效果应用于响应的高度图像

Question

我有三列布局。 左列和右列是需要悬停效果的完整背景图像。 我无法在CSS中实现此功能，因此我尝试使用jQuery，但在位置上却遇到了一个问题：两个元素都绝对。

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

http://jsfiddle.net/faumX/4/

这是我的代码html的示例：

 <div class="one-third">
        <div class="bg-image">
            <img src="http://placehold.it/429x900&text=left+up" id="leftUp" />
            <img src="http://placehold.it/429x900&text=left+over" id="leftOver" style="display:none;" />
        </div>
    </div>

CSS：

.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;
}

JS：

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

我真的是新手，如果有更好的CSS解决方案，我欢迎任何建议。

谢谢您的帮助。

Answer 1

我在您的提琴上改变了一些问题，问题是当您使事物消失时，它们会消失并且不透明对此更好。

我将叠加图像放置在默认图像上方，并将其设置为绝对图像，这样它将覆盖它，但是在开始时就被隐藏了。

焦点放在父div而不是图像上，因为当您将其悬停时它会消失。 试一试，看看您是否能理解我的所作所为，让我知道这是否是您想要的。

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

}）; var mouseEnterRight = function（）{$（'＃rightUp'）。fadeOut（）; $（ '＃rightOver'）淡入（）; } var mouseLeaveRight = function（）{$（'＃rightUp'）。fadeIn（）; $（ '＃rightOver'）淡出（）; } var mouseEnterLeft = function（）{$（'＃leftUp'）。animate（{opacity：0}）;; $（ '＃剩'）淡入（）。 } var mouseLeaveLeft = function（）{$（'＃leftUp'）。animate（{opacity：1}）; $（ '＃剩'）淡出（）。 }

http://jsfiddle.net/faumX/14/