Question

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

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

这是我的代码示例， 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（）{ $（＆＃39;＃rightUp＆＃39）。淡出（）; $（＆＃39;＃rightOver＆＃39）。淡入（）; } var mouseLeaveRight = function（）{ $（＆＃39;＃rightUp＆＃39）。淡入（）; $（＆＃39;＃rightOver＆＃39）。淡出（）; } var mouseEnterLeft = function（）{ $（＆＃39;＃的leftup＆＃39;）动画（{不透明度：0}）。 $（＆＃39;＃剩＆＃39）。淡入（）; } var mouseLeaveLeft = function（）{ $（＆＃39;＃的leftup＆＃39;）动画（{不透明度：1}）。 $（＆＃39;＃剩＆＃39）。淡出（）; }

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

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

1 个答案: