Question

你好我想用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>

Answer 1

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

演示：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;
}

悬停图像产品展示产品说明

1 个答案: