Уменьшить зону для кликов для ссылки

У меня есть одно слово на странице, и каждое отдельное письмо - это ссылка. Я хотел бы уменьшить размер области, которой можно щелкнуть, чтобы пространство вокруг букв не было. Сейчас все в порядке слева и справа от каждой буквы, но слишком много места выше и ниже каждой буквы. Я включил границу вокруг ссылок для иллюстративных целей (см. Скрипку ниже).Уменьшить зону для кликов для ссылки

Любые идеи о том, как?

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/

источник

2013-08-12 Keven

Это сложнее, чем кажется, возможно, зональные уголки помогут? http://www.w3schools.com/tags/att_area_coords.asp – lostphilosopher

@lostphilosopher Я действительно посмотрел на квадратные координаты, но я думаю, что они применимы только к изображениям, а не к текстам ... – Keven

В дополнении к programminginallston ответа вы можете также добавить переполнение скрытым и расширить поле, так:

a { 
    display: inline-block; 
    line-height: 1em; 
    overflow: hidden; 
    width: 180px; 
}

Хотя это делает клип Н, к сожалению.

источник

2013-08-12 22:38:03

Спасибо. скрытое переполнение должно дать мне то, что я хочу. Единственная проблема - это возможность вырезать вещи ... – Keven

Чтобы усложнить ситуацию. Я использую веб-шрифты, поэтому, если браузер не распознает шрифт, то резервный шрифт может выйти за пределы жестко закодированных границ. – Keven

обновление ваш a тег CSS, чтобы включать в себя

a { 
    display: inline-block; 
    line-height: 1em; 
}

Вы должны изменить display, так что вы можете работать с коробкой элемента, как это блок, в то же время позволяя ему двигаться рядный с текстом. Затем вы меняете line-height только на высоту текста. Браузеры обычно добавляют больше line-height для удобства чтения.

Вот обновленный jsfiddle: http://jsfiddle.net/QSL6T/

источник

2013-08-12 22:29:02 twinlakes

Сначала я был как, Sweet! Оно работает! Тем не менее, вы заметите, что если вы наведите указатель мыши на близкую к каждой букве, ссылка все равно «активируется» даже за пределами границы. Что с этим? – Keven

Я думаю, вы не можете понять это правильно. Это связано с интервалом между шрифтом. Поэтому вам нужно играть с высотой линии, чтобы найти идеальный матч. – putvande

Я не думаю, что этот ответ является решением. –

Это происходит потому, что имеется зарезервированное место для диакритики. Если вы хотите, например, показать Á или Ç, дополнительного пространства не будет.

Возможное обходное решение - определить margin-top вашему тексту и overflow: hidden вашему контейнеру. Here's an example fiddle.

источник

2013-08-12 22:48:04 Renato

+1 Для описания диакритики. Теперь я знаю, почему. – Keven

-1

Возможно, это?

a { 
     border: 1px solid black; 
     display: block; 
     padding-bottom:200px; 
     height: 10px; 
     width: 150px; 
    }

источник

2013-08-12 22:58:53

Уменьшить зону для кликов для ссылки

ответ

Смежные вопросы