Question

我正在尝试在tumblr上设置一些东西，所以当鼠标悬停在tumblr上时，我基本上可以将一个元素更改为另一个元素，例如：当鼠标悬停在其上时，将图片更改为一个文本框，但是当鼠标移出文本框时，它会变回图片。

理想情况下，我希望在图片上方有一个单词，当我将鼠标悬停在图片上时，单词会消失，其余的文字会出现。

here is an example of what I want to happen

我一直在寻找几个小时，但我找不到像我在做的事情。如果您想查看代码，我是从here获得的。

有很多代码我真的不知道我在做什么。我尝试从示例中提取代码并将其交叉种植到我的代码中，但是太多了。

如果有人知道我试图通过给出的例子来完成什么，你会介意在一个jfiddle中设置它，这样我就可以看到我想要做什么了吗？谢谢你的帮助！

Answer 1

它可以通过jQuery hover和animate实现。

这是my sample code。

HTML：

<img id="bg" src="http://www.stockfreeimages.com/White-and-grey-clouds-thumb10225136.jpg"/>       
<div class="title box">title</div>
<div class="content box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate</div>

脚本：

$("#bg").hover(function(){
 $(".title").stop().animate({left:"300px",opacity:0.0},1000,function(){$(this).hide()});
    $(".content").fadeIn();
},function(){
    $(".title").stop().show().animate({left:"100px",opacity:1.0},1000)
    $(".content").fadeOut();
});

的CSS：

.box{
    position:absolute;
    left:100px;
    color:white;
    z-index:1;
    pointer-events:none;
}
.title{
    top:70px;
}
.content{
    top:100px;
    width:300px;
    display:none;
}

Answer 2

这是一个内置jQuery函数的持续时间控件的例子。

这是一个JSFiddle示例：CLICK HERE

HTML：

<div class="image-holder">
    <div class="slide-in">Bob Marley</div>
    <div class="fade-in">Open your eyes, look within. Are you satisfied with the life you're living?</div>

CSS：

.image-holder {
    position: absolute;
    width: 350px;
    height: 400px;
    top: 20px;
    left: 20px;
    background-image: url("http://samuiartsandcrafts.com/images/watermarked/1/thumbnails/1/400/bob-marley-pop-art-e.jpg");
    background-position: center;
    background-size: cover;
}
.slide-in, .fade-in {
    position: absolute;
    font-family:"Courier", sans-serif;  
}
.slide-in {
    opacity: 1;
    left: 10px;
    top: 0;
    font-size: 22px;
}
.fade-in {
    opacity: 0;
    left: 0px;
    padding: 10px;
    bottom: 10px;
    width: 350px;
    background: rgba(0, 0, 0, .5);
    font-size: 18px;
    color: #FFFFFF;
}

jQuery的：

$('.image-holder').hover(function () {
    $('.fade-in', this).stop().animate( {
        opacity: 1});
    $('.slide-in', this).stop().animate({
        opacity: 0,
        left: "120px",
    }, 1000);
}, function() {
    $('.fade-in', this).stop().animate( {
        opacity: 0});
    $('.slide-in', this).stop().animate({
        opacity: 1,
        left: "10px",
    }, 1000);
});

鼠标悬停时使顶部元素淡出，底部元素淡入，然后在鼠标停止悬停后使顶部元素淡入？

2 个答案: