CSS3 悬停状态背景图片大小

Question

因此，当我将鼠标悬停在新网站上的按钮上时，会出现箭头的背景图像。效果很好。但是，在 Chrome 中（还没有在其他浏览器上测试过），第一个显示为一个大箭头，第二个之后它变成了正确的大小。

这是我的网站：

http://stilld.nl/nieuw/

这是我正在使用的代码：

HTML：

<a class="btn1" href="contact/"><h4>
            PLAN UW PROJECT
</h4></a>

CSS：

  .item a {
    text-decoration: none;
}

.item h4 {
    position: absolute;
    max-width: 200px;
    width: 100%;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 43px;
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 28px;
    padding-right: 28px;
    margin-top: 0px;
    bottom: 180px;
    left: 8.5%;
    color: white;
    border-radius: 6px;
    letter-spacing: 0.5px;
    text-transform: none;
    border-style: solid;
    border-width: 1.5px;
    border-color: white;
    -webkit-font-smoothing:antialiased;
    background-position: 93% 50%;
    background-repeat: no-repeat;

  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

.item h4:hover {
    position: absolute;
    max-width: 200px;
    text-align: center;
    width: 100%;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 43px;
    font-size: 16px;
    left: 8.5%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 46px;
    margin-top: 0px;
    color: white;

    background: url(../images/arrow_btn_banner.png) no-repeat;
    background-size: 30px 30px;

    background-position: 93% 50%;
    border-radius: 6px; 
    letter-spacing: 0.5px;
    text-transform: none;
    border-style: solid;
    border-width: 1.5px;
    border-color: white;
    -webkit-font-smoothing:antialiased;
}

我尝试在背景图像上方放置背景大小，但这不起作用。我试过改变图像的大小。但这也行不通。

Answer 1

也许您应该在h4 中将background-image 和background-size 设置为0 并且只在h4:hover 上重置background-size，所以bg 图像已经加载。