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

Applying Hover effect to responsive height image

本文关键字：响应 高度 图像 应用于 悬停      更新时间：2023-09-26

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

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

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解决方案，我愿意接受任何建议。

谢谢你的帮助

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

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

焦点在父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({不透明度:0});$(" #剩").fadeIn ();}var mouseleavelleft = function(){$ (' # leftUp ') .animate({不透明度:1});$(" #剩").fadeOut ();}

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

相关文章：