Question

我正在为我的箭头创建悬停效果。基本上我有两个相同的图像重叠，然后在悬停箭头向下过渡，使它显示为两个箭头。

我遇到的问题是由于某种原因导致转换的第二个箭头被切断。起初我认为这是一个高度问题。我增加了身高，这对我的情况没有帮助。我不确定为什么会被切断。

有谁知道为什么第二个过渡箭头会被切断？

#home-img-arrow-container {
    position: absolute;
    text-align: center;
    width: auto;
    bottom: 15%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#home-img-arrow {
    background:
  url("http:optimumwebdesigns.com/eslich/images/arrow.png") 0px 0px no-repeat,
   url("http:optimumwebdesigns.com/eslich/images/arrow.png");
    background-repeat: no-repeat;
    height: 83px;
    width: 143px;
    position: relative;
    cursor: pointer;
  transition-duration: .5s;
}
#home-img-arrow:hover {
    background:
  url("http:optimumwebdesigns.com/eslich/images/arrow.png") 
  0px 30px no-repeat,
  url("http:optimumwebdesigns.com/eslich/images/arrow.png");
   background-repeat: no-repeat;
  -webkit-transform: translate(0px,30px),
    transform: translate(0px,30px),
    transition-duration: .8s,
}

<div id="home-img-arrow-container">
        <div id="home-img-arrow"></div>
</div>

Answer 1

因为height的{{1}}小于其所需的空间。只需在#home-img-arrow属性上添加更高的值，例如height。

Updated JSFiddle

Answer 2

我添加了这个，

#home-img-arrow {
    padding-bottom:25px;
}

Answer 3

尝试将#home-img-arrow的高度更改为105px它将起作用

Working Fiddle

Answer 4

您可以将height的{{1}}增加到#home-img-arrow或其他可以添加105px和padding-bottom:23px;到margin-bottom:-23px;的解决方案

#home-img-arrow:hover

https://jsfiddle.net/n0fbckss/5/

多个背景图像大小调整问题

4 个答案: