Question

我确实有一些HTML看起来像这样：

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

使用这个Markup，我想用CSS做动画。动画意味着，我使用absolute和right:0定位了“translate-bar”。

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

我尝试使用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;
}

Answer 1

这是我通过修改CSS代码来实现的：

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

查看this JSFiddle demo here

我如何使用CSS或Jquery创建这个动画？

1 个答案: