更改悬停时的按钮图像

Question

表格截图 我已经成功添加了图像，但它向左移动了大约 3 个像素，我不知道为什么。它也不会出现在悬停时默认按钮图像的前面，而是出现在其后面（如果它没有未对齐，我就不会看到它）。

<!-- HTML CONTACT FORM -->

        <div class="form_background">
            <div class="container">
                <div class="screen">
                    <div class="screen-header">
                    </div>
                    <div class="screen-body">
                    <div class="screen-body-item left">
                        <div class="app-title">
                        <span>Say</span>
                        <span>HELLO!</span>
                        </div>
                        
                    </div>
                    <div class="screen-body-item">
                        <div class="app-form">
                        <div class="app-form-group">
                            <input class="app-form-control" placeholder="Your Name">
                        </div>
                        <div class="app-form-group">
                            <input class="app-form-control" placeholder="Your Email">
                        </div>
                        <div class="app-form-group message">
                            <input class="app-form-control" placeholder="MESSAGE">
                        </div>
                        <div class="app-form-group buttons">
                            <button class="app-form-button"><img src="images/Submit_Small.png" onMouse> </button>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
          </div>

/* CSS STYLE */

  .app-form-group.buttons:hover {
    background: url(images/Submit_Small_Hover.png);
    background-repeat: no-repeat;
    padding-left: -50px;
    text-align: center;
  } 

我对标准 Javascript 持开放态度，但更喜欢简单的 CSS 和 HTML 代码。我目前正在使用 Live Server 扩展在 VS Code 中进行编码。

用于居中 我尝试过调整边距和填充。填充在将背景图像向左移动时起作用，但不会影响将图像向右移动。我尝试过正值和负值。

用于图像显示 我一直在研究 :before 选项，但似乎有一个更简单的选项，我只是无法缩小范围。

我感谢有关此事的任何反馈。谢谢你！我已经查看了其他帖子和选项，但它们似乎使用了我不太熟悉的代码或其他策略。

Answer 1

可能有初始填充，我不建议使用背景 url，当然它更简单，但您不会像“img”元素那样对图像有太多控制，因此使用“img”元素将为您提供更多控制和灵活性，你可以使用很多 css futures。 对于悬停，我建议您搜索“css悬停状态”。 例如，这里是一个很好的来源。

.app-form-button {
  border: none;
  padding: 0;
  /* ensure for no initial paddings apply */
}

.hover-img {
  display: none;
  /* we dont want to display hover-img yet */
}

.app-form-button:hover .default-img {
  /* when hover hide default img with display none*/
  display: none;
}

.app-form-button:hover .hover-img {
  /* when hover set hover-img inline for it to show*/
  display: inline;
}

<div class="form_background">
  <div class="container">
    <div class="screen">
      <div class="screen-header">
      </div>
      <div class="screen-body">
        <div class="screen-body-item left">
          <div class="app-title">
            <span>Say</span>
            <span>HELLO!</span>
          </div>

        </div>
        <div class="screen-body-item">
          <div class="app-form">
            <div class="app-form-group">
              <input class="app-form-control" placeholder="Your Name">
            </div>
            <div class="app-form-group">
              <input class="app-form-control" placeholder="Your Email">
            </div>
            <div class="app-form-group message">
              <input class="app-form-control" placeholder="MESSAGE">
            </div>
            <div class="app-form-group buttons">
              <button class="app-form-button">
                            <img class="button-img default-img" src="./Submit_Small.jpg" >
                            <img class="button-img hover-img" src="./Submit_Small_Hover.jpg">
                        </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>