0

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

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

这是我想要发生的事情的一个例子

我一直在寻找几个小时，但我找不到任何像我正在做的事情。如果你想看代码，我是从这里得到的。

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

如果有人知道我通过给出的示例要完成什么，您介意在 jfiddle 中设置它以便我可以看到我正在尝试做什么吗？谢谢你的帮助！

4

2 回答 2

0

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

这是我的示例代码。

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;
}
于 2013-10-16T03:50:42.287 回答
0

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

这是一个 JSFiddle 示例： 单击此处

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);
});
于 2013-10-16T06:29:11.967 回答