0

我有以下代码，主要显示 4 个 div，每个 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;
}

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

谢谢

4

1 回答 1

1

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

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

我希望这能有所帮助 ：）

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

于 2018-10-22T14:59:18.143 回答