Question

我有类似的东西

<div id="hover_parent">
  <h3>Something</h3>
  <h3>Something else</h3>
</div>

看起来像这样

#hover_parent{
    background-image:url(animage.jpg) no-repeat;
    background-position:bottom left;
    background-size:cover;
    width:100%;
}

h3{
    margin-top:20px;
    width:50%;
    text-align:center;
    transition:0.2s;
}

h3:hover{
    margin-top:0px;
}

所以我要实现的是，将子元素悬停在上面时，它们会稍微向上移动。当然，他们在悬停时使用较小的保证金最高限额来做的事情。
但是我的问题是，当悬停一个子元素时，整个父对象也会向上移动（尤其是背景图像）。

我该如何预防？

我的所有子元素都没有真正的绝对高度，因此我没有提供min-height和calc，但是可以做到这一点-也不？

Answer 1

尝试一下。 h3必须display:inline-block;

#hover_parent{
background:url(https://dummyimage.com/600x400/000/fff) no-repeat;
background-position:bottom left;
background-size:cover;
width:100%;
  color:#fff;
  height:200px;
}
h3{
margin-top:20px;
width:50%;
text-align:center;
transition:0.2s;
 display:inline-block;
}
h3:hover{
margin-top:0px;
}

<div id="hover_parent">
<h3>Something</h3>
<h3>Something else</h3>
</div>

悬停孩子时不要移动背景图像

1 个答案: