У меня есть несколько div с тем же классом "product". Когда я нахожусь на каждом элементе продукта, мне нужно, чтобы у них был эффект наведения, но проблема в том, что когда я наводил верх над первым элементом, все другие элементы также применяли эффект, а не только тот, который я висел. Что я делаю не так?
<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>
моя моя скрипка: МОЙ ФИДДЛ
Это потому, что вы плаваете в div. Изменение margin-top
перемещает элемент, создающий комнату под ним.
Что вам нужно, так это:
div.product{
position:relative;
}
div.product:hover{
top:-5px;
}
position:relative
основном занимает исходное пространство, но позволяет div быть рендером в другом месте.