Reduzieren Sie den anklickbaren Bereich für link
Habe ich ein Wort auf einer Seite und jede einzelne Brief ist ein link. Ich möchte zum reduzieren der Größe der klickbaren Bereich, so dass es keinen Raum um die Buchstaben. Gerade jetzt ist es in Ordnung, auf der Links und rechts von jedem Buchstaben, aber es ist zu viel Raum über und unter jedem Buchstaben. Ich habe einen Rahmen um die links zur Veranschaulichung (siehe fiddle unten).
Irgendwelche Ideen auf, wie?
HTML:
<body>
<div>
<h1><a href=#>H</a></h1>
<h1><a href=#>E</a></h1>
<h1><a href=#>L</a></h1>
<h1><a href=#>L</a></h1>
<h1><a href=#>O</a></h1>
</div>
</body>
CSS:
body {
font-family: 'Sigmar One', cursive;
font-size: 100px;
color: white;
text-shadow: 4px 4px 4px #000;
background-color:blue;
width: 100%;
height: 100%;
margin: 0;
}
a {
border: 1px solid black;
}
div {
position:absolute;
height:100%;
width:100%;
display: table;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align:center;
}
a:visited, a:active {
text-decoration: none;
color: white;
}
a:link {
text-decoration: none;
color: white;
text-shadow: 0px 2px 3px rgba(255,255,255,.25);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
a:hover {
text-shadow: 4px 4px 4px #000;
color: white;
}
FIDDLE:
http://jsfiddle.net/8Huu7/10/
- Dies ist schwieriger als es aussieht, vielleicht area coords helfen? w3schools.com/tags/att_area_coords.asp
- Ich sah tatsächlich in area coords, aber ich denke, dass Sie sich nur auf Bilder aus, nicht auf text...
Du musst angemeldet sein, um einen Kommentar abzugeben.
Neben programminginallston Antwort können Sie auch hinzufügen, overflow hidden und erweitern Sie das Feld so :
Obwohl das clip-H, leider.
aktualisieren Sie Ihre
a
- tag css zu gehörenMüssen Sie ändern die
display
so dass Sie arbeiten können mit der box des Elements, wie es ist ein block, während immer noch so dass es zu bewegen, inline mit dem text. Ändern Sie dann dieline-height
zu sein, nur die Höhe des Textes. Browser in der Regel fügen Sie eine größereline-height
für die Lesbarkeit.Hier ist die aktualisierte jsfiddle: http://jsfiddle.net/QSL6T/
Dies geschieht, weil es ist ein reservierter Platz für diakritische Zeichen. Wenn Sie wollte, um zu zeigen, Á oder Ç, zum Beispiel, würde es keinen zusätzlichen Speicherplatz.
Eine mögliche Problemumgehung ist, zu definieren
margin-top
zu Ihrem text undoverflow: hidden
zu Ihrem container. Hier ist ein Beispiel, fiddle.Vielleicht ?