html - 悬停图像不显示

Question

我创建了一个带有图片的网站，其想法是，当您将鼠标悬停在图片上时，您会看到一些信息，当您点击它时，您会看到全部信息。

这是我使用的代码:

#SWAT {
  background: url("img/SWAT-01.png");
  width: 855px;
  height: 160px;
  display: inline-block;
}

#SWAT:hover {
  background: url("IMG/SWAT-02.png");
}

#SWAT:active {
  background: url("IMG/SWAT-03.png");
}

#Jennifer {
  background: url("img/Jennifer-1.png");
  width: 161px;
  height: 160px;
  display: inline-block;
  margin: 5px;
}

#Jennifer:hover {
  background: url("IMG/Jennifer-2.png");
}

#Jennifer:active {
  background: url("IMG/Jennifer-3.png");
}

#Kosh {
  background: url("img/Kosh-1.png");
  width: 160px;
  height: 162px;
  display: inline-block;
  margin: 5px;
}

#Kosh:hover {
  background: url("IMG/Kosh-2.png");
}

#Kosh:active {
  background: url("IMG/Kosh-3.png");
}

#VM {
  background: url("img/VM-1.png");
  width: 507px;
  height: 162px;
  display: inline-block;
  margin: 5px;
}

#VM:hover {
  background: url("IMG/VM-2.png");
}

#VM:active {
  background: url("IMG/VM-3.png");
}

#MJ {
  background: url("img/MJ-1.png");
  width: 332px;
  height: 164px;
  display: inline-block;
  margin: 5px;
}

#MJ:hover {
  background: url("IMG/MJ-2.png");
}

#MJ:active {
  background: url("IMG/MJ-3.png");
}

#Cheke {
  background: url("img/Cheke-1.png");
  width: 161px;
  height: 162px;
  display: inline-block;
  margin: 5px;
}

#Cheke:hover {
  background: url("IMG/Cheke-2.png");
}

#Cheke:active {
  background: url("IMG/Cheke-3.png");
}

#LauraM {
  background: url("img/LauraM-1.png");
  width: 160px;
  height: 160px;
  display: inline-block;
  margin: 5px;
}

#LauraM:hover {
  background: url("IMG/LauraM-2.png");
}

#LauraM:active {
  background: url("IMG/LauraM-3.png");
}

#Vilma {
  background: url("img/Vilma-1.png");
  width: 161px;
  height: 162px;
  display: inline-block;
  margin: 5px;
}

#Vilma:hover {
  background: url("IMG/Vilma-2.png");
}

#Vilma:active {
  background: url("IMG/Vilma-3.png");
}

#AnaLu {
  background: url("img/AnaLu-1.png");
  width: 162px;
  height: 161px;
  display: inline-block;
  margin: 5px;
}

#AnaLu:hover {
  background: url("IMG/AnaLu-2.png");
}

#AnaLu:active {
  background: url("IMG/AnaLu-3.png");
}

#Mario {
  background: url("img/Mario-1.png");
  width: 160px;
  height: 161px;
  display: inline-block;
  margin: 5px;
}

#Mario:hover {
  background: url("IMG/Mario-2.png");
}

#Mario:active {
  background: url("IMG/Mario-3.png");
}

#Ansu {
  background: url("img/Ansu-1.png");
  width: 162px;
  height: 161px;
  display: inline-block;
  margin: 5px;
}

#Ansu:hover {
  background: url("IMG/Ansu-2.png");
}

#Ansu:active {
  background: url("IMG/Ansu-3.png");
}

#mas {
  width: 334px;
  height: 161px;
  display: inline-block;
  margin: 5px;
}

<div id="SWAT"></div><br>
<div id="Jennifer"></div>
<div id="Kosh"></div>
<div id="VM"></div><br>
<div id="MJ"></div>
<div id="Cheke"></div>
<div id="LauraM"></div>
<div id="Vilma"></div><br>
<div id="AnaLu"></div>
<div id="Mario"></div>
<div id="Ansu"></div>
<div id="mas">
  <a class='default-link' href="http:google.com"><img src="IMG/mas-2.png"></a>
</div><br>
<br>

我很抱歉这么长，但我不知道我哪里做错了。无论如何，我在 Brackets 上做了这个，并且在处理它时它在 Chrome 和 Safari 中看起来很好。然而，一旦我将它上传到我的网站并上线，默认图像就消失了!如果我将鼠标悬停在悬停图像上，我可以看到悬停图像，当我单击它们时，事件图像也会显示，但默认设置不显示。

我做错了什么？

Answer 1

很少见，但可能是您正在使用的环境/服务器区分大小写。您在某些 (IMG/Ansu-1.png) 上有大写 img 文件夹，在其他 (img/Ansu-1.png) 上有小写。