Question

我遇到的问题是，在图像上应用颜色叠加后，内容（如按钮）不再可点击。我已将问题缩小到 .overlay：之前的 CSS代码。当我注释掉这部分代码时，我可以再次单击该按钮。但是，我无法弄清楚代码中的确切原因。任何帮助将不胜感激！

JSFiddle：http://jsfiddle.net/suomyone/3ewzur9b/1/

这是HTML：

<section class="overlay blue2" id="contact" name="contact">
    <img src="http://placehold.it/300x200" />
    <h3>Contact</h3>
    <p><b>T:</b> ###-###-####</p>
    <p><b>F:</b> ###-###-####</p>
    <button type="button" class="contactButton">Contact Us</button>
</section>

这里是CSS：

.overlay {
    position: relative;
}

.overlay:before {
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.blue2 {
    background-color: rgba(36, 131, 178, 0.9);
}

#contact {
    color: #fff;
    width: 500px;
    height: 300px;
    padding: 1.875em 2.8125em 0 2.815em;
    overflow: hidden;
}

#contact img {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
}

.contactButton {
    color: #fff;
    font-size: 0.864375em;
    text-transform: uppercase;
    width: 10.55676em;
    height: 1.80766em;
    margin-top: 10px;
    background-color: #F7CB5F;
    border: 1px solid #F7CB5F;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    cursor: pointer;
}

.contactButton:hover {
    background-color: #2483B2;
    border: 1px solid #2483B2;
}

.contactButton:active {
    position: relative;
    top: 1px;
}

Answer 1

将按钮放在默认（静态）以外的位置，然后响应：

.contactButton {
  color: #fff;
  font-size: 0.864375em;
  text-transform: uppercase;
  width: 10.55676em;
  height: 1.80766em;
  margin-top: 10px;
  background-color: #F7CB5F;
  border: 1px solid #F7CB5F;
  border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  cursor: pointer;
  position: relative; /* NEW */
}

<强> jsFiddle example

叠加导致按钮变为不可点击

1 个答案: