javascript - 当我将鼠标悬停在图像上时如何显示虚拟箭头

Question

我有以下代码，主要显示 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>

结果如下:

我想这样做，以便当用户将鼠标悬停在最后一个 Div 上时，它会在图像本身上显示一个箭头“>”，以模仿用户可以显示接下来的 4 个元素。任何人都可以就如何实现这个提出建议吗？在这个阶段，我只需要添加一个虚拟箭头，没有别的。

现在我在最后一个 Div 中添加了一个名为 class='profile-image' 的类:-

<div  class="profile-image" 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;
}

但这并没有任何效果...

谢谢

Answer 1

如果您将所有 div 包装在一个“主”div 中(您可以只给它一个 .master 类)，那么您将能够使用“last-child”。 ' 在这个类中以它里面的最后一个 div 为目标。

在'last-child'中你可以使用:hover允许您在将鼠标悬停在箭头上时显示箭头图像。您可以将箭头作为背景图像添加到 div 上，并使其具有“可见性:可见；”或“不透明度:1；”当它处于事件悬停状态时。

希望对您有所帮助:)

(编辑:我希望在样式表中而不是内联样式中执行此操作)