Überlauf ausgeblendet für ein "a" -Tag innerhalb eines absolut positionierten div mit border-Radius

Ich versuche, das a-Tag innerhalb eines absolut positionierten div mit dem Border-Radius 100% einzuschließen. Eigentlich möchte ich die Möglichkeit deaktivieren, auf den Link außerhalb des kreisförmigen Elternteils zu klicken. Aber ich kann es nicht schaffen ... Ich hatte den Eindruck, dass ich das mit Überlauf verstecken konnte, aber trotzdem kann ich den Link von der Außenseite des "Kreises" anklicken.Überlauf ausgeblendet für ein "a" -Tag innerhalb eines absolut positionierten div mit border-Radius

Irgendwelche Ideen?

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/

Quelle

2017-06-22 Sbpro

Warum nisten Sie den Link ('.Logo-link') in eine Hülle (' .logo')? – ihmels

@ihmels danke für die Zeit zu kommentieren - ich endete ohne die äußere div - aber doch, wenn die inneren Elemente (denke das Logo img) ist über den Kreis, ist immer noch die Verbindung von der Außenseite des Kreises zugänglich. Wahrscheinlicher Überlauf wird in diesem Fall nicht funktionieren, wenn das äußere Element als absolut oder ähnlich positioniert ist ... Ich muss die Ecken des inneren Bildes erzwingen, um innerhalb des Kreises zu bleiben. – Sbpro

Ja, Sie haben Recht, aber es scheint, dass nur WebKit/Blink basierte Browser dieses Problem haben. – ihmels

Wenn Sie den Grenzradius auf den Anker gesetzt und der Überlauf versteckt wird es funktionieren

.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>

Quelle

2017-06-22 13:00:45 Musa

Ich würde die gleiche Antwort posten, aber ich habe wirklich keine Ahnung, warum das Hinzufügen von 'border radius and overflow hidden' auf dem Anchor-Tag funktioniert, aber nicht auf dessen Eltern. Können Sie erklären? –

Danke Musa, das habe ich ausprobiert - trotzdem klappt es nicht ... starte dein Schnipsel und stecke die Maus über die linke obere Ecke des Kreises, außen ... der Link ist noch klickbar ... – Sbpro

@AbhishekPandey Ich weiß es eigentlich nicht, ich denke, es ist wegen der absoluten Positionierung des div – Musa

würde ich den Stil direkt an das a Element anwenden und dann wickeln um einen div Element als Behelfslösung. Ich habe es in Firefox (54) und Chromium (58) getestet.

.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; 
 
}

<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>

Quelle

2017-06-22 13:32:14 ihmels

Überlauf ausgeblendet für ein "a" -Tag innerhalb eines absolut positionierten div mit border-Radius

Antwort

Verwandte Themen