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>

Answer 2

这很有趣，我在过去的几天里刚刚做了这样的事情；

div.portfolio_item{
width:33%;
margin:1.5%;
margin-bottom:-30px;
background-color:white;
border-radius:20px;
float:left;
height:200px;
overflow:hidden;
text-align:justify;}

div.portfolio_item img {
max-width:95%;
margin:auto;}

div.portfolio_item p:first-child{
text-align:center;}

div.portfolio_item p:not(:first-child), div.portfolio_item h3 {
display:none;}

div.portfolio_item:hover p, div.portfolio_item:hover h3 {
display:block;}

div.portfolio_item:hover {
width:80%;
height:80%;
overflow:auto;
position:fixed;
margin:auto;
top:10%;
left:10%;
float:none;
clear:both;
border:solid black 1px;
z-index:10;}

实际上，您可以在我的投资组合页面上看到它；http://www.briarmoon.ca/design/portfolio.html

图像在第一个

标记，然后其他所有内容都被隐藏，除非将鼠标悬停在上面。此时它会弹出占据大部分屏幕。

高温高压