Question

我找到了一个话题，其中一个朋友需要的东西非常接近我想要的东西但因为我只是新CSS 和 JQuery 的业余爱好者我不能想办法！那个话题就像2012年一样，而且很老了！ The topic in question

所以我想要的就像这个网站上的那个：
point the cursor at the cinemagraph bird logo at the middle of screen

差异是：
1）在我链接的主题中，动画不关注鼠标位置，但在我的例子中，当光标在它上面时它会动画，当鼠标离开时它会倒回 2）在我的例子中，两个图像都移到一边，但在那个主题中它不是

和其他差异你可以看到自己

感谢您的回复

Answer 1

尝试这样做可以达到类似的效果。

在外部<div>

中创建两个<div>元素

<div id='outer'>
   <div id='inner'>
       <!-- put first image here -->
   </div>
   <div id='sub'>
       <!-- put second image here, this will appear on hover -->
   </div>
</div>

然后应用以下CSS来实现悬停效果：

#outer {
    width:100px;
    margin:10px auto;
    height:80px;
    position:relative;
    overflow:hidden;
    transition: width .5s;  /* change width over a period of 500ms */
}

#inner {
    height:100%;
    position:absolute; 
    width:100px;
    left:0px;
    top:0px;
    background-color:#9b3d3d;
}

#sub {
    height:100%;
    position:absolute;
    right:0px;
    top:0px;
    width:100px;
    opacity:0;
    background-color:#3a6d90;    
    transition: opacity .5s;  /* change opacity over a period of 500ms */
    z-index:-1;
}


#outer:hover {
    width:200px; /* expand outer div on hover , exposing the 'sub' div */
}

#outer:hover #sub {
    opacity:1;  /* change opacity to 1 so 'sub' div becomes visible */
}

我们的想法是让<div>与id＆＃39; sub＆＃39;最初是隐藏的。一旦外部div被徘徊，＆＃39; sub＆＃39; div将被揭晓。

这是一个JSFiddle，展示了这个概念：http://jsfiddle.net/X53na/1/

图像在悬停时从另一个图像后面滑出

1 个答案: