链接在div内不起作用，容器上具有渐变

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了链接在div内不起作用，容器上具有渐变相关的知识，希望对你有一定的参考价值。

这里是我的代码的链接，如何使锚链接可点击？坚持相同的设计？尝试使用z-index，但隐藏了渐变。https://codepen.io/splendid1234/pen/XWJKmmB

<div class="container">
  <div class="directory">
    <div class="owner">
      <a href="https:///www.google.com">Google</a>
      <a href="https:///www.google.com">fb</a>
      <a href="https:///www.google.com">twitter</a>
      <a href="https:///www.google.com">amazon</a>
    </div>
  </div>
</div>
答案

不确定这是否是您想要的吗？ 

.container
  position: relative;

a:hover
  cursor:pointer;


.directory 
  display: flex;
   flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    justify-content: space-between;
    white-space: nowrap;
    scroll-behavior: smooth;


.owner 
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    background-image: linear-gradient(to right, red 1%, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, 0) 85%, blue 100%);

<html>
<div class="container">
  <div class="directory">
    <div class="owner">
      <a style=" background: -webkit-linear-gradient(left, red,red,blue);-webkit-background-clip: text;-webkit-text-fill-color: transparent; " href="https:///www.google.com">Google</a>
      <a href="https:///www.google.com">fb</a>
      <a href="https:///www.google.com">twitter</a>
      <a href="https:///www.google.com">amazon</a>
    </div>
  </div>
</div>
</html>

以上是关于链接在div内不起作用，容器上具有渐变的主要内容，如果未能解决你的问题，请参考以下文章

MPDF div在表格内不起作用

来自 Grafana 的电子邮件警报在 docker 容器内不起作用

Rails 4：条件显示在视图内不起作用

引导可折叠面板在 ng-if 内不起作用

为啥我的点击功能在移动设备上的这个 SVG 内不起作用，但在桌面上却起作用？

为啥问号在 %% 内不起作用？ [复制]