Question

我试图将一个标签包含在一个绝对定位的div中，边界半径为100％。实际上我想禁用在圆形父div之外单击链接的功能。但是我无法做到......我的印象是我可以通过隐藏溢出来做到这一点，但我仍然可以点击“圈子”外面的链接。

有什么想法吗？

HTML

<div class="container">
  <div class="logo">
    <a id="logo-link" class="logo-link" href="#" title="WEBSITE">
      <img src="logo-sq.png" alt="LOGO">
      <div class="logo-text">
        <span class="site-title">SITE</span>
        <span class="slogan">SLOGAN</span>
      </div>
    </a>
  </div>
</div>

CSS

.container {
  position:relative;
}
.logo {
    right: 10px;
    top: 20px;
    width: 300px;
    height: 300px;
    position: absolute;
    padding: 2px;
    background: #fff;
    border: 4px dotted #022f66;
    border-radius: 100%;
    box-shadow: 2px 2px 10px;
    overflow: hidden;
}
.logo-link {
    width: auto;
    height:300px;
    text-align: center;
    display: block;
    text-decoration: none !important;
    border: 1px solid;
}

https://jsfiddle.net/joomquery/7hwq5xc3/

Answer 1

如果您将边框半径放在锚点上并且隐藏了溢出，则它将起作用

.container {
  position:relative;
}
.logo {
    right: 10px;
    top: 20px;
    width: 300px;
    height: 300px;
    position: absolute;
    padding: 2px;
    background: #fff;
    border: 4px dotted #022f66;
    border-radius: 100%;
    box-shadow: 2px 2px 10px;
    overflow: hidden;
}
.logo-link {
    width: auto;
    height:300px;
    text-align: center;
    display: block;
    text-decoration: none !important;
    border: 1px solid;
    border-radius: 100%;
    overflow: hidden;
}

<div class="container">
  <div class="logo">
    <a id="logo-link" class="logo-link" href="#" title="WEBSITE">
      <img src="logo-sq.png" alt="LOGO">
      <div class="logo-text">
        <span class="site-title">SITE</span>
        <span class="slogan">SLOGAN</span>
      </div>
    </a>
  </div>
</div>

Answer 2

我会将样式直接应用于a元素，然后将div元素包装为变通方法。我在Firefox（54）和Chromium（58）中进行了测试。

＆＃13;

.container {
  position: relative;
}

.logo {
  position: absolute;
  right: 10px;
  top: 20px;
}

.logo a {
  border: 1px solid #022f66;
  border-radius: 50%;
  display: block;
  height: 300px;
  overflow: hidden;
  text-align: center;
  width: 300px;
}

.logo a::before {
  background: #fff;
  border: 4px dotted #022f66;
  border-radius: 50%;
  bottom: -6px;
  box-shadow: 2px 2px 10px #000;
  content: " ";
  left: -6px;
  position: absolute;
  right: -6px;
  top: -6px;
  z-index: -1;
}

＆＃13;

<div class="container">
  <div class="logo">
    <a id="logo-link" class="logo-link" href="#" title="WEBSITE">
      <img src="logo-sq.png" alt="LOGO">
      <div class="logo-text">
        <span class="site-title">SITE</span>
        <span class="slogan">SLOGAN</span>
      </div>
    </a>
  </div>
</div>

＆＃13;

对于具有border-radius的绝对定位div内的“a”标记隐藏溢出

2 个答案: