悬停图像不显示答案

【问题标题】：Hover images not showing悬停图像不显示
【发布时间】：2019-05-12 19:30:07
【问题描述】：

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

这是我使用的代码：

#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 中看起来很好。但是，一旦我将其上传到我的网站并上线，默认图像就消失了！如果我将鼠标悬停在它们上方，我可以看到悬停图像，当我单击它们时，活动图像也会显示，但默认值不会显示。

我做错了什么？

【问题讨论】：

您是否在控制台中看到任何错误？
我不这么认为？？至少我在括号中看不到任何东西（我假设是控制台？我很抱歉我真的只是一个初学者）当我在 Chrome 中运行 html 文件时，一切都正确加载，这是我加载的时候图像不显示的服务器上的文件 (???)
实际上，您的代码有效（我尝试使用在线图片）。所以我认为您可能为图像设置了错误的路径/目录...要查看控制台错误，请在运行页面时打开浏览器的 DevTools，按下F12。检查目录，如果可能的话，向我们展示文件夹/目录结构
嗨，检查一下你的图片路径，可能是错误类型的路线。
@CalvinNunes 谢谢！我发现控制台错误，是的，我所有的默认图像似乎都有错误。但是，当我转到 IMG 文件夹时，所有图像都在那里？？？其他正在工作的图像以“png”类型表示，但这些有错误的图像表示“text/html”。这可能是因为我使用了 background: url 而不是 background-image 吗？（我这样做是因为这是我在网上看到的方式）

标签： html css hover

【解决方案1】：

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

【讨论】：

我不敢相信！这是区分大小写的事情。在这些事情上编码太难了哈哈哈，但我已经吸取了教训！谢谢！