css - 悬停图像不居中

Question

使用 pingendo 并尝试使用悬停选项制作图像背景。因此，主图像应位于页面中间，当您将鼠标悬停在其上时，会出现第二张图像。该部分有效，但它在左侧，如果您在手机上看它，它就会向右。我已经尝试了所有方法，但无法使页面正确居中。这就是我最初的方式，它运行良好

<div class="cover">
   <div class="cover-image" style="background-image: url(images/bulb.jpg);"></div>
</div>

但后来我想添加悬停，所以我将其添加到头部

<style type="text/css">
  .imgBox

        {
            width: 760px;
            height: 690px;
            background: url(/images/bulb.jpg) no-repeat;
        }
        .imgBox:hover {
            width: 760px;
            height: 690px;
            background: url(/images/bulb1.jpg) no-repeat;
            }
</style>


<div class="imgBox"></div>

Answer 1

请检查整页。

.cover-image{
  width: 760px;
  height: 690px;
  background: url(https://dummyimage.com/760x690/000/fff) no-repeat;
  background-position:center;
  margin: 0 auto;
  background-size:cover;
}
.cover-image:hover {
  width: 760px;
  height: 690px;
  background-image: url(https://dummyimage.com/800x800/aba4ab/0011ff);
}
@media screen and (max-width:767px){
.cover-image{
  width: 100%;      
}
.cover-image:hover {
  width: 100%;     
}
}

<div class="cover">
  <div class="cover-image"></div>
</div>