CSS变换比例z-index

时间:2017-02-06 05:19:21

标签: css css3 hover scale z-index

我试图弄清楚如何将悬停内容从第34节中引出;一些特色设计作品"在该部分的其他瓷砖之上。

将鼠标悬停在400x400图片占位符上,您可以看到其他图片的标题位于其他图片占位符之下。

谢谢!

3 个答案:

答案 0 :(得分:3)

由于切片位于不同的z-index "row"内,因此无论您应用什么z-index,它们都会根据父z-index div顺序堆叠。

z-index属性是相对于父容器的。因此,第1行中的"row"为100,将位于第2行的div

您只能通过将所有磁贴放在同一z-index <% Object domName = request.getAttribute("domainName"); String documentationLink = UMRACM.getDomainDocumentationMap().get(domName); %> <td><a href="<%=documentationLink%>"target="_blank" id="domainName_<s:property value="#rowstatus.index"/>"><s:property value="domainName" /></a></td> 内,然后将高href(类似9999)添加到悬停样式来解决此问题。

答案 1 :(得分:0)

通过检查您提供的示例中的代码,看起来每个图片都有一个负数z-index:-999,然后在悬停时将transform:scale(1.5);应用于父级。

CodePen Example

答案 2 :(得分:-1)

只需使用z-index

.wordWrap:hover{
   ...
   z-index: 1;
}