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）上有小写的

。

悬停图像未显示

1 个答案: