Den anklickbaren Bereich von In-line-Links größer machen, ohne das Layout zu beeinflussen

Question

Ich möchte den klickbaren Bereich von Links größer machen, als sie tatsächlich sind, da es für die vorgesehenen Benutzer schwierig sein kann, sie zu treffen. Etwa 1,5x ist die Größe angemessen. Das sind Links im normalen Text, so dass ich sie nicht vergrößern kann, was das Layout durcheinander bringen würde.

Ich benutze HTML5, CSS3, JS oder sogar Mozilla-spezifische Funktionen, um dies zu erreichen, da die neueste Firefox-Version das einzige Ziel ist, obwohl basic CSS/HTML lieber als solche Hacks wäre natürlich viel vorzuziehen!

Answer 1

Eine Option, die möglicherweise funktioniert, ist die Verwendung des Pseudoelements :after. Etwas wie dieses:

a { 
    position: relative 
} 
.bigger:after{ 
    content:""; 
    padding: 50px; 
    position: absolute; 
    left: -25px; 
    top: -25px; 
} 

Zahlen konnten geändert werden, wie Sie mögen. Der einzige Nachteil, den ich sofort sehen kann, ist, wenn Sie irgendetwas vor IE8 unterstützen müssen. http://caniuse.com/#feat=css-gencontent

Hier ist ein fiddle.

Answer 2

Sie können es mit einer größeren Polsterung tun.

Zum Beispiel:

.a{ 
    padding: 20px; 
    margin: -20px; //lets keep the layout 
} 

Hier haben Sie ein lebendiges Beispiel: http://jsfiddle.net/u5kuJ/1/

Aktualisiert:

Mit Ihrer Geige: http://jsfiddle.net/XXgqu/1/

Answer 3

ich ziemlich sicher bin, kann man nicht Mach was du fragst. Die einzigen Dinge, die einem einfallen, sind Padding, Rand und Zeilenhöhe. Es ist zwar nicht meine Lieblingslösung, aber abhängig vom Kontext der Seite, vielleicht eine Seite mit allen aufgelisteten Links, die ein größeres Ziel hat.

Verwenden Sie auch die outline & die outline-offset CSS-Eigenschaften mit gutem Kontrast, damit die Leute wissen, sind auf der Verknüpfung.

Eine andere Sache ist, Leute, die ein größeres Ziel brauchen, verwenden die Tastatur häufiger, um eine Website zu navigieren, so kann Ihre Website mehr Tastatur freundliche helfen. Haben Sie beispielsweise eine Kopfzeile und eine Seitenleiste, die über den Code vor dem Hauptinhalt stehen? Wenn dies der Fall ist, kann auch eine skip nav Verknüpfung oder einige (je nach Layout) helfen.

Answer 4

Ich habe ein Update auf GOTOHALES Antwort, es wird mit was auch immer die Länge des Textes ist arbeiten, dann fügen Sie einige Auffüllen.

http://jsfiddle.net/vG7UY/2/

a { 
    position: relative; 
} 
    .biggerForMobile:before{ 
    content:""; 
    width:100%; 
    height:100%; 
    position:absolute; 
    padding:12px; 
    top:-10px; 
    left:-10px; 
} 

Answer 5

Sie können das :after Pseudoelement das Element Pad, und mit transform und position Sie die Polsterung auf der Mitte des Elements zentriert positionieren kann, ohne andere Elemente zu beeinflussen.

Ändern Sie die padding: 30px in die von Ihnen benötigte Polsterung.

.padded-click { 
    position: relative; 
} 
.padded-click:after{ 
    padding: 30px; 
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

Hinweis: Diese sonst auf gotohales Lösung basiert, die ein großer Ansatz ist jedoch mit Pixelwerten als gotohales Lösung mit oben und links tut erfordert unter Berücksichtigung der Breite/Höhe des Elements sind wir padding Die Polsterung wird nicht zentriert sein.