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

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在里面。

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

我希望这会有所帮助：）

（编辑：我希望在样式表中而不是在嵌入式样式中做到这一点）