Странное поведение ссылок

[alleclf]

Делаю красивое выделение ссылок при наведении курсора (при наведении курсора мыши ссылка выделяется синим блоком).

Вот пример: http://jsfiddle.net/x75PL/

 

Выделение блоком срабатывает только при наведении на блок с ссылкой - так и надо. Проблема в том, что ссылка срабатывает и при наведении вне приделов блоков - по всей ширине страницы. Почему так происходит.

 

Как сделать что бы ссылка срабатывала только при наведении на блок (который выделяется синим - link 1 и link 2 из примера), или при наведении на текст (link 3 из примера).

Edited February 16, 2014 by alleclf

[ShumNo]

быть может вариант задать ширину?

[wendigo]

Почему так происходит.

Тег <a> - строчный элемент. Тег <div> - блочный. По стандартам нельзя использовать блочный элемент внутри строчного. 

 

В данном случае, <div> внутри растягивает родительский элемент <a> на всю ширину экрана.

 

Как сделать что бы ссылка срабатывала только при наведении на блок

 

Следовать стандартам. Разместить тег <a> внутри тега <div>

Edited February 16, 2014 by wendigo

[alleclf]

а как тогда выделять блок при наведении? Ведь хочется чтобы выделялся и реагировал на клик весь блок а не только текст.

 

Следовать стандартам. Разместить тег внутри тега  

Edited February 16, 2014 by alleclf

[alleclf]

Почему не работает если вместо дивов использовать спан, вот так - http://jsfiddle.net/x75PL/2/

[wendigo]

Можно сделать так, как предложил  ShumNo, указать ширину(дополнительно сделав отображение тега <a> блочным, таким образом мы не нарушаем вышеупомянутые стандарты).

a {    display: block;    width: 160px;}

http://jsfiddle.net/x75PL/1/

Edited February 16, 2014 by wendigo

[alleclf]

Можно сделать так, как предложил  ShumNo, указать ширину(дополнительно сделав отображение тега <a> блочным, таким образом мы не нарушаем вышеупомянутые стандарты).

a {    display: block;    width: 160px;}

http://jsfiddle.net/x75PL/1/

отлично, я уже на спане начал переделывать - http://jsfiddle.net/x75PL/3/

[SelenIT]

Тег <a> - строчный элемент. Тег <div> - блочный. По стандартам нельзя использовать блочный элемент внутри строчного.

По актуальным стандартам ссылка может содержать потоковый контент (в т.ч. div), и вообще.

В CSS, да, блочные боксы должны содержаться в блочных же контейнерах, иначе бывает путаница с анонимными боксами-обертками. Но «блочность/строчность» элементов HTML тут ни при чем.