如何使用CSS或Jquery创建此动画？

我有一些HTML看起来像这样：如何使用CSS或Jquery创建此动画？

<div class="translate-bar"> 
    <div class="icon"> 
    <img src="images/translator-icon.png"> 
    </div> 
    <div class="contents">   
    <p>tranlate contents</p> 
    </div> 
</div>

使用这个标记，我想用CSS做一个动画。动画的意思是，我用absolute和right:0定位了“translate-bar”。

然后，我需要在浏览器上只显示“图标”图像，然后当用户点击或图标上的鼠标悬停DIV然后我需要显示“内容”DIV。图标和内容DIVs内联显示。

我试过用CSS transition。但我无法弄清楚这一点。

我的CSS：

.translate-bar { 
    position: absolute; 
    right: 0; 
    z-index: 9999; 
    display: table; 
} 

.icon { 
    height: 50px; 
} 

img { 
    width: 50px; 
} 

.contents { 
    display: table-cell; 
    vertical-align: middle; 
    background: #ebebeb; 
}

来源

2015-07-10 user3733831

请给我们的jsfiddle或你需要尝试举例说明，以便我们了解您的需求或错误。 –

@HimeshAadeshara，你难道不明白我的问题吗？ – user3733831

这是一个当前代码的小提琴 - https://jsfiddle.net/kupLs5zn/2/ – user3733831

这是我做到了通过修改你的CSS代码：

.contents { 
    display: table-cell; 
    vertical-align: middle; 
    background: #ebebeb; 
    visibility:hidden; 
} 
.icon:hover + .contents { visibility: visible; }

看一看this JSFiddle demo here

来源

2015-07-10 06:18:21

Ahs N，这不是我所需要的 – user3733831

我建议的解决方案接近您的要求吗？如果是这样，那么要改变什么？添加动画也许？ –

是的，它是关闭..检查此https://jsfiddle.net/kupLs5zn/2/ – user3733831

如何使用CSS或Jquery创建此动画？

回答

相关问题