Javascript 如何在图像上方悬停时显示虚拟箭头

我有以下代码，主要显示4个Div，每个

Div

包含一个图像+文本，显示在图像下方，这是我的代码：

<div style="float: left;margin-left:9px">
<img style="height:90px;width:185px" src="*****.jpg" alt="ntitle">
<br>
<span style="font-size:9px"><a target="_blank" href="****">*****</a></span>
</div>
<div style="float: left;margin-left:9px">
<img style="height:90px;width:185px" src="*****.jpg" alt="ntitle">
<br>
<span style="font-size:9px"><a target="_blank" href="****">*****</a></span>
</div>
<div style="float: left;margin-left:9px">
<img style="height:90px;width:185px" src="*****.jpg" alt="ntitle">
<br>
<span style="font-size:9px"><a target="_blank" href="****">*****</a></span>
</div>
<div style="float: left;margin-left:9px">
<img style="height:90px;width:185px" src="*****.jpg" alt="ntitle">
<br>
<span style="font-size:9px"><a target="_blank" href="****">*****</a></span>
</div>

然后我定义了以下css：-

.profile-image:hover .overlay {
  position:absolute;
  width: 48px;
  height: 48px;
  z-index: 100;
  background: transparent url('/Resources/xt.png') no-repeat;
  cursor: pointer;
}

但这没有任何效果

---

谢谢

如果您将所有div包装在一个“master”div中（您可以给它一个.master类），那么您将能够在此类中使用“”来定位其中的最后一个div

在“最后一个子对象”中，当您将鼠标悬停在箭头上方时，可以使用来显示箭头的图像。您只需将箭头添加为div上的背景图像，并使其具有“可见性：可见；”或“不透明度：1；”当它处于活动悬停状态时

我希望这有点帮助：）

---

（编辑：我希望在样式表中而不是内联样式表中进行此操作）

您可以提供您的CSS吗？使用js carousel，每张幻灯片将有四个div和图像供您选择？要显示和隐藏箭头，可以编写jQuery代码，即$（“next”）.show（）$（“下一步”）.hide（）@AdamMcquiff查看我的编辑，我提供了我正在使用的css

.profile-image:hover .overlay {
  position:absolute;
  width: 48px;
  height: 48px;
  z-index: 100;
  background: transparent url('/Resources/xt.png') no-repeat;
  cursor: pointer;
}