我想制作某个图像，当鼠标移到它上面时它会变成另一个图像；通过创建链接可以轻松使用css，并且此链接充当图像更改的部分，在进行方形悬停时没问题。
但是我想在对角线图像上悬停，我该怎么做？
例如此图像：- 当鼠标悬停在链接 1 上时，图像变为白色图像，例如。
问问题
766 次
1 回答
0
最简单的方法是使用具有透明区域的定位良好的图像（叠加层），如果您不想使用图像，我能想到的唯一方法是使用边框黑客来创建三角形/对角线。如果你在 Stu Nicholls 的网站 www.cssplay.com 上选择后者，那是我多年前学习的地方——但要注意它随着 CSS 的发展而相当先进
按要求解释：
因为使用从左到右倾斜的对角线图像不支持对角线（/ / / /），这意味着图像不会按照您的意愿出现在一起，而是一个倾斜的左下角将与右上角对齐之前的倾斜，而不是你想要的右下角
您可以通过使用 z-index 重叠它们以及相对或绝对定位来解决此问题：
.img1 { width: 100px; position: relative; z-index: 1; }
.img2 { width: 100px; position: relative; left: -100px; z-index: 2; }
.img3 { width: 100px; position: relative; left: -200px; z-index: 3; }
.img4 { width: 100px; position: relative; left: -300px; z-index: 4; }
每个图像进一步移动会有更大的间隙，确切的距离将取决于图像的大小和倾斜角度。请记住，您实际上会想要移动包装 a 而不是图像本身，否则您可以单击的区域不会位于图像上方
于 2013-04-06T20:25:46.810 回答