悬停图片产品展示产品说明答案

【问题标题】：Hover image product display products description悬停图片产品展示产品说明
【发布时间】：2014-11-26 19:46:48
【问题描述】：

你好，我想用 css html 创建一个悬停动画，当我悬停在这样的图像上时显示产品信息http://www.ikea.gr/epipla-grafeiou/grafeia-kai-trapezia/grafeia/

提前谢谢你

<style>
    body{width:600px; margin:0 auto;}
    .product{float:left; width:200px;}
    .product:hover{border:1px solid #dedede;}
    .text{color:#000; display:none;}
    .proimg:hover +.text{color:red; display:block;}

</style>

<div class="product">
    <img class="proimg"src="0.jpg" alt="" />
    <p class="text">lorem ipsum</p>
</div>

【问题讨论】：

到目前为止你做了什么？你不能指望有人会为你做到:)
欢迎来到 StackOverflow，在提问之前请阅读 SO 的规则，这不是 SO 的工作方式，您需要向我们提供您遇到的问题，我们会帮助您解决它，我们不能、不应该也不会为您编程。
那个网站对我来说全是希腊语:)
对不起，我是这个社区的新手
@Valantis Geros - stackoverflow 是一个网站，当您卡在某个地方时可以提出问题，或者至少向我们展示您的发现。

标签： jquery html css image hover

【解决方案1】：

要产生这样的效果，您应该使用设置了高度和宽度的列表项排列产品，并使用“display:inline-block;”横向对齐它们。然后，您应该在该列表项中插入一个“<a>”标签，并将额外信息放在插入此“<a>”标签的“<div>”标签中。

演示：http://jsfiddle.net/vgfLa353/

HTML：

<ul class="products">
    <li>
        <a>
            <div class="image" style="background-image:url(http://www.blogdobg.com.br/wp-content/uploads/2012/08/seu-madruga.jpg);"></div>
            <h1>Information 1</h1>
            <h2>Information 2</h2>
            <div class="informations">
            <p>any aditional information you want here bla bla bla bla lorem ipsum bacon yeah</p>
                <label><input type="checkbox"/>checkbox</label>
            </div>
        </a>
    </li>
</ul>

CSS：

.products {
    display:block;
    width:100%;
    height:100%;
    position:relative;
    margin:0px;
    padding:0px;
    font-size:0px;
    list-style:none;
}

.products li {
    display:inline-block;
    width:200px;
    height:237px;
    position:relative;
    margin:0px;
    padding:0px;
    z-index:1;
}

.products li:hover {
    z-index:2;
}

.products li a {
    display:block;
    width:180px;
    height:auto;
    padding:10px;
    position:absolute;
    background-color:white;
    cursor:pointer;
}

.products li:hover a {
    box-shadow:0px 0px 5px rgba(0,0,0,0.5);
    -moz-box-shadow:0px 0px 5px rgba(0,0,0,0.5);
    -webkit-box-shadow:0px 0px 5px rgba(0,0,0,0.5);
    -o-box-shadow:0px 0px 5px rgba(0,0,0,0.5);
    -ms-box-shadow:0px 0px 5px rgba(0,0,0,0.5);
}

.products li a .image {
    display:block;
    height:150px;
    position:relative;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    background-color:black;
}

.products li a h1 {
    display:block;
    height:auto;
    margin:10px 0px;
    font-family:arial;
    font-size:20px;
    font-weight:bold;
}

.products li a h2 {
    display:block;
    height:auto;
    margin:10px 0px;
    font-family:arial;
    font-size:12px;
    font-weight:normal;
}

.products li a .informations {
    display:none;
}

.products li a .informations p,
.products li a .informations label {
    display:block;
    height:auto;
    margin:10px 0px;
    font-family:arial;
    font-size:10px;
    color:grey;
    font-weight:normal;
}

.products li:hover a .informations {
    display:block;
}

【讨论】：

非常感谢，这对我很有帮助