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

I have three column layout. The left and right columns are full background images that I need hover effects for. I couldn't achieve this in CSS so I'm attempting jQuery, but I'm having an issue when it comes to position: absolute on both elements.

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

It requires I put a height on the image, but I need it to stay responsive. I tried position relative but there is now a noticeable jump when hovering. Here's my fiddle:

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

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

Here's an example of my code, html:

这是我的代码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();
}

I'm realtively new to this, if there is a CSS solution to this that is better, I'm open to any suggestions.

我对此非常陌生,如果有一个更好的CSS解决方案,我愿意接受任何建议。

Thanks for the help.

谢谢您的帮助。

1 个解决方案

#1

I changed a few things on your fiddle the problem is when you fade things out they dissapear and opacity is better for this.

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

I placed the overlay image above the default one and set it to absolute, this way it will be over it but it's hidden on start.

我将叠加图像置于默认值上方并将其设置为绝对值,这样它就会覆盖它,但它会在开始时隐藏。

The focus is on the parent div not the image, since it dissapears when you hover it. Play around with it and see if you can understand what I did, let me know if this is what you were looking for.

焦点在于父div而不是图像,因为当你悬停它时它会消失。玩弄它,看看你能不能理解我做了什么,让我知道这是你想要的。

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

}); var mouseEnterRight = function(){ $('#rightUp').fadeOut(); $('#rightOver').fadeIn(); } var mouseLeaveRight = function(){ $('#rightUp').fadeIn(); $('#rightOver').fadeOut(); } var mouseEnterLeft = function(){ $('#leftUp').animate({opacity:0}); $('#leftOver').fadeIn(); } var mouseLeaveLeft = function(){ $('#leftUp').animate({opacity:1}); $('#leftOver').fadeOut(); }

}); 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/

#1