Question

我试图在鼠标悬停时对几张照片进行悬停效果，因此我遇到两个问题：

1）当现有的div出现时，我的对齐关闭。

2）我不能一个接一个地做出平滑的效果（有四张图片）。

以下是我的HTML，CSS和jQuery四张图片之一。

HTML：

<div class="col-xs-12 col-md-4 col-md-offset-2">
            <div id="beach1"></div>
            <div class="layer3"></div>
           <div class="layer4">
            <div class="magnifyingGlass"></div>
            <img src="images/magnify.png" class="img-responsive" id="magnify" alt="Magnifying Glass" />
           </div>
           <div class="layer5">
            <div class="label">
                    <p class="title">Lorem ipsum dolor sit</p>
                    <p class="title2">amet consetetur sadipscing eltir</p>
            </div>
           </div>
    </div>

CSS：

#beach1{
    height: 300px;
    background-image: url(../images/beach.jpg);
    background-repeat: no-repeat;
    margin-bottom: 40px;
}

#magnify{
    margin-top: -35px;
    padding: 10px 10px;
    z-index: 9999;
}

.magnifyingGlass{
    height: 34px;
    width: 34px;
    background-color: #1abc9c;
    z-index: 999;
}

.layer4{
    height: 44px;
    width: 44px;
    background-color: rgba(26, 188, 156, .5);
    margin: -210px 20px 0 0;
    float: right;
    padding: 5px 5px;
    position: relative;
    display: hide;
}

.label{
    height: 65px;
    width: 99%;
    background-color: #1abc9c;
    display: block;
    position: relative;
    z-index: 999;
}

.layer5{
    height: 75px;   
    background-color: rgba(26, 188, 156, .5);
    margin-top: -115px;
    padding: 5px 0 0 5px;
    display: hide;
}

.title{
    font-size: 18px;
    color: #fff;
    text-align: left;
    display: block;
    position: relative;
    padding: 10px 5px;
}

#title2{
    color: #087253;
    font-size: 12px;
    text-align: left;
    padding: 0 5px;
    display: block;
    position: relative;
}

jQuery的：

$(document).ready(function(){
    $('.layer3').mouseover(function(){
        $(this).hide();
        $('.layer4').show();
        $('.layer5').show();
    });
});

有没有人对如何提供帮助？

Answer 1

这里有一些问题。

1：显示：隐藏为invaild

您的意思是拥有display: none

2：定位。

为了使元素相互重叠，它们需要脱离流程。使用定位来执行此操作。我会推荐一个具有绝对内部元素的相对容器。

3：褪色

你的jQuery只是隐藏和显示元素，它们没有过渡到它。如果您希望它们淡入淡出，您可以使用jQuery函数.fadeOut()和.fadeIn()或使用.animate()创建自定义动画：

$(function(){
    $(".layer3").hover(function(){
        $(this).fadeOut(500);
        $(".layer4, .layer5").fadeIn(500);
    });
});

这是一个非常粗糙的example。

如何使用jQuery悬停效果

1 个答案:

1：显示：隐藏为invaild

2：定位。

3：褪色