悬停在div元素上不会单独执行效果

时间:2014-04-17 20:47:58

标签: html css3 hover css-transitions

我有多个具有相同类别"产品"的div。当我将鼠标悬停在每个产品元素上时,我需要它们具有悬停效果,但问题是当我将鼠标悬停在第一个元素上时,所有其他元素也会应用效果,而不仅仅是我悬停的效果。我做错了什么?

<style>
    div.product{
        width:90%;
        margin:10px auto;
        height: 200px;
        transition: all 0.1s ease;
        background-color: #069;
    }
    div.product:hover{
        margin-top:-5px;
    }
    .img_box{
        width:50%;
        height:100%;
        padding: 10px;
        float:left;
        box-sizing: border-box;
    }
    .desc_box{
        width:50%;
        height:100%;
        float:left;
        padding: 10px;
        box-sizing: border-box;
    }
    .img{
        background-color: #b65050;
        height: 100%;
    }

    .desc{
        background-color:  chocolate;
        height: 100%;
    }
</style>

HTML:

<div>
<div class="product">
    <div class="img_box">
        <div class="img">
            image
        </div>
    </div>
    <div class="desc_box">
        <div class="desc">
            desc
        </div>
    </div>
</div>
<div class="product">
    <div class="img_box">
        <div class="img">
            image
        </div>
    </div>
    <div class="desc_box">
        <div class="desc">
            desc
        </div>
    </div>
</div>
 <div class="product">
    <div class="img_box">
        <div class="img">
            image
        </div>
    </div>
    <div class="desc_box">
        <div class="desc">
            desc
        </div>
    </div>
</div>
 <div class="product">
    <div class="img_box">
        <div class="img">
            image
        </div>
    </div>
    <div class="desc_box">
        <div class="desc">
            desc
        </div>
    </div>
</div>
</div>

继承我的小提琴: MY FIDDLE

1 个答案:

答案 0 :(得分:2)

这是因为你正在浮动div。更改margin-top会移动在其下方创建空间的元素。

你需要的是:

div.product{
    position:relative;
}

div.product:hover{
    top:-5px;
}

position:relative基本上占用了原始空间,但让div在其他地方呈现。