Html 将鼠标悬停在div元素上不会单独产生效果

我有多个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>

部门产品{
宽度：90%；
利润率：10px自动；
高度：200px；
过渡：所有0.1秒轻松；
背景色：#069；
}
部门产品：悬停{
页边顶部：-5px；
}
.img_盒{
宽度：50%；
身高：100%；
填充：10px；
浮动：左；
框大小：边框框；
}
.描述框{
宽度：50%；
身高：100%；
浮动：左；
填充：10px；
框大小：边框框；
}
.img{
背景色：#b65050；
身高：100%；
}
.描述{
背景颜色：巧克力色；
身高：100%；
}

HTML:

形象
描述
形象
描述
形象
描述
形象
描述

---

这是我的小提琴：这是因为你在浮动div。更改

边距顶部

会移动在其下方创建空间的图元

您需要的是：

div.product{
    position:relative;
}

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

---

position:relative

基本上占用了原始空间，但允许在其他地方渲染div。

它们需要是类，因为这些类将从数据库加载，并且有100多个。

div.product{
    position:relative;
}

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