链接在 div 内不起作用 [英] Links not working inside div

问题描述

我认为这个问题与 链接在浮动 div 内不起作用但我还是想不通.

我有一个 div 如下:

.fullwidthimage {宽度:100%；位置:相对；z-索引:-1；}.imageoverlay {左:0；文本对齐:居中；位置:绝对；z-索引:1；顶部:15px；宽度:100%；}#主页按钮{位置:绝对；文本对齐:居中；z-索引:100；底部:50px；宽度:200px；高度:60px；左:50%；左边距:-100px；字体大小:25px；边框:1px纯黑色；边框半径:5px；背景颜色:橙色；颜色:黑色;文字装饰:无；}

<img class="noround imageundertext smallimg" src="http://placehold.it/600x800"><img class="noround imageundertext midimg" src="http://placehold.it/1000x1000"><img class="noround imageundertext bigimg" src="http://placehold.it/3200x1300"><img class="noround imageundertext xlimg" src="http://placehold.it/5000x1500"><h1 class="imageoverlay">Title Here</h1><a href="#getstarted" id="homepagebutton">开始使用</a>

不同的图像使用 CSS 媒体查询以不同的尺寸显示/隐藏.整个事情是一个全宽图像，带有文本标题和图像顶部的按钮"(实际上只是一个看起来像按钮的链接).

我在该 div 中放置的任何链接都不起作用 - 文本显示在页面上，但如果您将鼠标悬停在上面，则没有任何反应.

为什么?！

直接放置在同一页面上的 div 之外的链接工作得很好，所以我认为这与那里的其他包含 div 没有任何关系.

我从上一个问题中假设这与定位有关，但我无法使其工作.

谢谢！

解决方案

如果你在 z-index 中给一个 -1，它会在 body<后面/代码>.所以整个 div.fullwidthimage 变得不可点击或不可访问.所以，以 z-index: 1 为起点.

.fullwidthimage {宽度:100%；位置:相对；z-索引:1；/* 改变这个！*/}.imageoverlay {左:0；文本对齐:居中；位置:绝对；z-索引:2；/* 增加这个！*/顶部:15px；宽度:100%；}

I think this question is related to Link not working inside floated div but I still can't figure it out.

I have a div as follows:

.fullwidthimage {
  width: 100%;
  position: relative;
  z-index: -1;
}
.imageoverlay {
  left: 0;
  text-align: center;
  position: absolute;
  z-index: 1;
  top: 15px;
  width: 100%;
}
#homepagebutton {
  position: absolute;
  text-align: center;
  z-index: 100;
  bottom: 50px;
  width: 200px;
  height: 60px;
  left: 50%;
  margin-left: -100px;
  font-size: 25px;
  border: 1px solid black;
  border-radius: 5px;
  background-color: orange;
  color: black;
  text-decoration: none;
}

<div class="fullwidthimage">
  <img class="noround imageundertext smallimg" src="http://placehold.it/600x800">
  <img class="noround imageundertext midimg" src="http://placehold.it/1000x1000">
  <img class="noround imageundertext bigimg" src="http://placehold.it/3200x1300">
  <img class="noround imageundertext xlimg" src="http://placehold.it/5000x1500">
  <h1 class="imageoverlay">Title Here</h1>
  <a href="#getstarted" id="homepagebutton">Get Started</a>
</div>

The different images are using a CSS media query to display/hide at different sizes. The whole thing is a full width image with a text title and 'button' (that's actually just a link styled to look like a button) over the top of the image.

Whatever links I put inside that div won't work - the text shows on the page, but nothing happens if you mouse over.

Why?!

Links placed immediately outside of the div on the same page work just fine, so I don't think it's anything to do with other containing divs there.

I'm assuming from that previous question asked that it's something to do with the positioning, but I can't make it work.

Thanks!

解决方案

If you give a -1 in z-index, it goes behind body. So the whole div.fullwidthimage becomes unclickable or unaccessible. So, give z-index: 1 as the starting point.

.fullwidthimage {
  width: 100%;
  position: relative;
  z-index: 1;               /* Change this! */
}
.imageoverlay {
  left: 0;
  text-align: center;
  position: absolute;
  z-index: 2;               /* Increase this! */
  top: 15px;
  width: 100%;
}

这篇关于链接在 div 内不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！