html - 悬停时展开 div 以显示更多信息

Question

有没有办法让它在用户将鼠标悬停在 div 上时展开并显示更多信息。我正尝试为电子商务网站执行此操作，因此它具有显示名称的图像，当有人将鼠标悬停在左侧时，它会显示价格、描述并添加到购物车。

Html 和 css 是首选，我在想改变宽度的东西，但我无法让它工作。

Answer 1

也许你想要这样的东西

<article>
  <p>Description and price</p>
  <img src="http://placekitten.com/200/300" alt="amazing item" />
</article>

<style type="text/css">
 article{
    float: left;
}
 article p{
    float: left;
    width: 0px;
    -webkit-transition: width .5s ease;
    -moz-transition: width .5s ease;
    -ms-transition: width .5s ease;
    -o-transition: width .5s ease;
    transition: width .5s ease;
}
 img{
    float: left;
}
 article:hover p{
    width: 150px;
}

</style>