Tworzenie klikalnego obszaru linków w linii większej bez wpływu na układ

Szukam, aby klikalny obszar linków był większy niż w rzeczywistości, ponieważ dla zamierzonych użytkowników może być trudno je trafić. Około 1,5 x rozmiar może być odpowiedni. Są to linki w normalnym tekście, więc nie mogę ich powiększyć, co zepsułoby układ.Tworzenie klikalnego obszaru linków w linii większej bez wpływu na układ

Używam HTML5, CSS3, JS, a nawet funkcji specyficznych dla Mozilli, aby to osiągnąć, ponieważ najnowsza wersja Firefoksa jest jedynym celem, chociaż podstawowy CSS/HTML zamiast takich hacków byłby oczywiście dużo lepszy!

Źródło

2013-03-25 not amused

Jedną z opcji, która może działać, jest użycie pseudoelementu :after. Coś takiego:

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

Numery mogą być modyfikowane, jak chcesz. Jedynym minusem, jaki widzę od razu, jest to, że trzeba wspierać wszystko przed IE8. http://caniuse.com/#feat=css-gencontent

Oto fiddle.

Źródło

2013-03-27 14:15:55 gotohales

Mam szczęście, że nie muszę obsługiwać żadnych starszych przeglądarek, a to działa. Na rzeczywistych stronach zrobiło się trochę niesmacznie (większa strefa kliknięcia w ogóle nie była skupiona na tekście), ale można to naprawić za pomocą równie nieudanych poprawek. –

Opera nie wyrównała skrzynki kliknięć we właściwy dla mnie sposób, korzystając z powyższego przykładu. Coś, co sprawdziło się lepiej, jest następujące: http://jsfiddle.net/WD8Yh/47/ –

Możesz to zrobić, używając większego wypełnienia.

Na przykład:

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

Tutaj masz żywy przykład: http://jsfiddle.net/u5kuJ/1/

Aktualizowanie:

Dzięki swojej skrzypce: http://jsfiddle.net/XXgqu/1/

Źródło

2013-03-25 09:54:26 Alvaro

To nie działa. Są to linki w tekście, klikalny obszar musi pokrywać się z normalnym tekstem. http://jsfiddle.net/XXgqu/ –

Zaktualizowałem moją odpowiedź. Sprawdź to teraz. – Alvaro

To dziwnie sprawia, że klikalne jest tylko z lewej i górnej. Na prawo od niego i poniżej nie jest. W przeciwnym razie to efekt, którego szukam. –

-1

Jestem całkiem pewien, że nie można rób to, o co prosisz. Jedyne, co przychodzi na myśl, to dopełnienie, margines i wysokość linii. Chociaż nie jest to moje ulubione rozwiązanie, ale w zależności od kontekstu witryny, być może ma stronę ze wszystkimi wymienionymi linkami, która ma większy cel.

Być może użyjesz też właściwości CSS o dobrym kontraście, aby inni wiedzieli, że znajdują się na łączu: outline &

Inną sprawą jest, że ludzie, którzy potrzebują większego celu, częściej korzystają z klawiatury, aby poruszać się po stronie internetowej, dzięki czemu Twoja strona może być bardziej przyjazna dla klawiatury. Na przykład, czy masz nagłówek i pasek boczny, za pomocą kodu, czy pochodzą one przed główną treścią? Jeśli tak, umieszczenie linku skip nav lub kilku (w zależności od układu) również może pomóc.

Źródło

2013-03-26 13:45:39

Dobra rada, ale interfejs to nie mysz i klawiatura, ale ekran dotykowy z jednym kliknięciem do użytku publicznego, więc naprawdę potrzebuję większej strefy trafień. –

Prawdopodobnie dobrze jest dołączyć do pytania: –

Dokonałem aktualizacji do odpowiedzi gotohales, będzie ona działać niezależnie od długości tekstu, a następnie dodać dopełnienie.

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

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

Źródło

2014-08-06 08:20:15

można użyć pseudo-element :after pad pierwiastka, i za pomocą transform i position można ustawić padding wyśrodkowany na środku elementu bez wpływu na inne elementy.

Zmień padding: 30px na dowolne wypełnienie, którego potrzebujesz.

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

Uwaga: Jest to oparte na roztworze gotohales, który jest doskonałym podejściem, jednak przy użyciu górnej i lewej pikseli wartości jako roztwór gotohales nie wymaga uwzględnienia szerokość/wysokość elementu jesteśmy wyściółka inaczej wyściółka będzie poza środkiem.

Źródło

2014-12-05 07:22:25

Tworzenie klikalnego obszaru linków w linii większej bez wpływu na układ

Odpowiedz

Powiązane problemy