是否可以在没有 JS 或图像映射的情况下使 z-index 较低的区域可点击?
我设计了一个带有精心设计的透明标题的网站,该标题必须穿过页面主要部分的一部分。我试图将网站中使用的图像数量保持在最低限度,部分是为了尺寸,部分是为了更清晰的标记。
我想开始将可点击的项目放在透明度下方的空白区域中。我通过使用 z-index 设法使图像与有问题的 div 重叠。当然,现在它是不可点击的。
有没有人有一个聪明的解决方案来解决这个问题?我可以想出几种不同的方法来“解决”不太理想的问题,但我希望避免这些方法并找到不使用 JS 或图像映射的解决方案。我尝试使用具有更高 z 顺序的嵌套 div(外部 div 为 -1,内部 div 为 1),但它不起作用。
I've designed a website with an elaborate transparent header that has to pass over part of the main section of the page. I'm trying to keep the number of images used in the website down to a minimum, partly for size and partly for cleaner markup.
I want to start putting clickable items in a blank area under the transparency. I managed to get the image to overlap the div in question by playing with the z-index. Now of course, it's unclickable.
Does anyone have a clever solution to this problem? I can think of several different ways "around" the problem that are less ideal, but I'm hoping to avoid those and find a solution that doesn't use JS or an imagemap. I've tried to use a nested div with a higher z-order (outer div is -1, inner div is 1), but it doesn't work.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
事实证明根本没有必要改变 z-index。我所要做的就是使用负边距,然后我就可以单击图像下方透明区域中的内容。我的错误是最初假设由于某种原因我需要更改 z-index。如果我在不触及 z-index 的情况下进行尝试,那么这根本就不是问题。
It turns out that it wasn't necessary at all to change the z-index. All I had to do was use the negative margin and I could click the content in the transparent area under the image. My mistake was making the initial assumption that I would need to change the z-index for some reason. If I had attempted it without touching the z-index, It wouldn't have been an issue at all.
你可以 $.Event 来创建一个事件,然后在需要时触发它:)
完美跨浏览器且简单
you can $.Event to make an event and then trigger it when ever needed :)
prefectly cross browser and easy