logo标签列表

CSS叠加层中的链接接管了一个div

javascriptjqueryhtmlcss
3

我有一个包含链接的 <div> 元素。

在这个 <div> 的右下角，我添加了一个覆盖层，在鼠标悬停时会覆盖整个 <div>。

这个覆盖层同样包含一个链接。

问题是：在覆盖层中的链接不能被点击。

这个问题是因为我在 .overlay-content 类上使用了 pointer-events: none;，如果不使用此属性，则两个链接都无法点击。

请查看代码：

.panel-default1 {
  padding-top: 10px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
  height: 400px;
  width: 400px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}

.amg-corner-button_wrap {
  display: block;
  background-color: #e8c63d;
  position: absolute;
  transform: rotate(45deg);
  right: -320px;
  bottom: -320px;
  width: 400px;
  height: 400px;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.amg-corner-button_wrap:hover {
  transform: rotate(45deg) scale(4);
}

.overlay-content {
  pointer-events: none;
  bottom: 0;
  color: #333;
  left: 0;
  opacity: 0;
  padding: 30px;
  position: absolute;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  right: 0;
  top: 0;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.overlay-content h2 {
  border-bottom: 1px solid #333;
  padding: 0 0 12px;
}

.amg-corner-button_wrap:hover~.overlay-content {
  opacity: 1;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
<div class="panel panel-default1">
  <div class="panel-body">
    <a href="#">Link</a>
    <div class='amg-corner-button_wrap'></div>

    <div class="overlay-content">
      <h2>Image Ink Logo</h2>
      <a href="#">Link</a>
    </div>

  </div>
  <!-- panel body -->

</div>
<!-- panel default -->

此外，这里是示例代码。

我有没有办法实现这个？

你尝试过直接在需要工作的链接标签上添加“pointer-events: all”（或默认值）吗？ - theGleep
1
如果这样做，当你悬停在链接上时，悬停效果会消失。 - Joseph Cho
我觉得可能需要一些 JavaScript。 - showdev
检查元素，看起来你无法点击链接的原因是因为divs层叠在一起。你尝试过从转换到动画，并在动画的前1%使用display none，然后剩下的99%使用你已经有的转换吗？这需要更多的动画管理，但它可以解决层叠问题导致的点击问题。 - k2snowman69
如果您删除pointer-events属性并使用z-index，以及使用动画而不是过渡，那么您可能可以在没有JavaScript的情况下完成此操作（您需要animation-fill-mode：forwards，它没有过渡对应项）。 - TylerH
渴望看到你的想法付诸实践 :) - showdev
4个回答
2

难以置信我竟然找到了一个纯CSS的解决方案，没有任何缺点。

.panel-default1 {
  padding-top: 10px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
  height: 400px;
  width: 400px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}

.amg-corner-button_wrap {
  display: block;
  background-color: #e8c63d;
  position: absolute;
  transform: rotate(45deg);
  right: -320px;
  bottom: -320px;
  width: 400px;
  height: 400px;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.wrap:hover .amg-corner-button_wrap {
  transform: rotate(45deg) scale(4);
}

.overlay-content {
  pointer-events: none;
  bottom: 0;
  color: #333;
  left: 0;
  opacity: 0;
  padding: 30px;
  position: absolute;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  right: 0;
  top: 0;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.overlay-content h2 {
  border-bottom: 1px solid #333;
  padding: 0 0 12px;
}

.wrap:hover .amg-corner-button_wrap ~ .overlay-content {
  pointer-events: auto;
  opacity: 1;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
<div class="panel panel-default1">
   <div class="panel-body">
     <a href="#">Link</a>
     <div class="wrap">
        <div class='amg-corner-button_wrap'></div>
        <div class="overlay-content">
          <h2>Image Ink Logo</h2>
          <a href="#">Link</a>
        </div>
    </div>
  </div> <!-- panel body -->
</div> <!-- panel default -->

JSFiddle

不要监听角落按钮的 :hover 事件，应该在父元素上监听。因为无论元素子代的鼠标交互如何，:hover 都会被触发，所以一旦角落按钮被悬停，就可以将包含链接（覆盖内容）的子元素设置为 pointer-events: auto。现在，覆盖内容是可悬停的，并且由于它是包裹 div 的子级，它将导致整个包裹 div 上的 :hover 保持活动状态。

非常好，Manuel。谢谢你。但是你能否更详细地解释一下你做了什么？ - mattvent
@mattvent 好的，我已经添加了一个解释。你可以将这个CSS与你之前的CSS进行比较，看看到底有什么变化。只有3行代码+在HTML中增加了一个额外的div。 - Manuel Otto
1
我建议使用JS样式交换而不是CSS指针事件来解决这个问题。 当你鼠标移到底部角落时，你需要触发你的css一次更改，并在你鼠标移出容器时触发另一个事件。 我认为CSS不能给你那种条件控制。
0

这里有一个使用动画而不是转换的解决方案。当您将鼠标悬停在amg-corner-button_wrap上时有效，但在您移开鼠标时无效。我对动画还有点陌生，希望这里的某个了解更多的人能够帮助您完成后半部分。

如果您在amg-corner-button_wrap上悬停并在过渡中移开鼠标，那么这里也会出现奇怪的视觉效果。原因是我给overlay-content添加了背景颜色，因此当它淡入并且您将鼠标移开amg-corner-button_wrap时，滑动开始在淡出完成之前反向。

无论如何，希望这个50%的解决方案可以帮助您或其他人将其推向100％！我必须去参加会议了，祝好运 :-)

@keyframes example {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  1% {
    visibility: visible;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}

.panel-default1 {
  padding-top: 10px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
  height: 200px;
  width: 200px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}

.amg-corner-button_wrap {
  display: block;
  background-color: #e8c63d;
  position: absolute;
  transform: rotate(45deg);
  right: -120px;
  bottom: -120px;
  width: 200px;
  height: 200px;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.overlay-content {
  visibility: hidden;
  opacity: 0;
  background-color: #e8c63d;
  bottom: 0;
  color: #333;
  left: 0;
  padding: 30px;
  position: absolute;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  right: 0;
  top: 0;
}

.overlay-content h2 {
  border-bottom: 1px solid #333;
  padding: 0 0 12px;
}

.overlay-content~.amg-corner-button_wrap,
.amg-corner-button_wrap:hover {
  transform: rotate(45deg) scale(4);
}

.amg-corner-button_wrap:hover~.overlay-content,
.overlay-content:hover {
  animation-name: example;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-delay: 0.3s;
  animation-fill-mode: both;
}
<div class="panel panel-default1">
  <div class="panel-body">
    <a href="#" onclick="alert('outer')">Link</a>

    <div class='amg-corner-button_wrap'></div>

    <div class="overlay-content">
      <h2>Image Ink Logo</h2>
      <a href="#" onclick="alert('inner')">Link</a>
    </div>

  </div>
  <!-- panel body -->

</div>
<!-- panel default -->

所有这些都说了，如果这是我的代码，我可能会尝试想办法拆分覆盖内容和amg-corner-button_wrap...但我可以理解为什么这有点困难。也许不要将角落对象动画变大，而是动画化覆盖内容的背景。使用关键帧将使您更容易。1%->50%将是背景转换。50%->100%将引入文本。 - k2snowman69
0

这里有一个仅使用CSS和HTML的工作示例：https://jsfiddle.net/y2auh7gn/4/。

它将链接从overlay-content中分离出来，并使用position: absolute将其放置在应该放置的位置。我们需要将链接移出overlay-content，以便当我们悬停在上面时，覆盖层不会消失。

有一个副作用，即链接会随着角落一起弹出。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接