Использование привязки без href только для того, чтобы получить эффект :hover?

Если вы посмотрите сюда и наведете курсор на "PONUDA", вы получите вот такое красивое наведение эффект. Дело в том, что у всех li есть якорь, который имеет значение href, поэтому при нажатии на них будет открыта какая-то страница. Но поскольку у меня есть подменю, отображаемое при наведении курсора на «PONUDA», я не хочу, чтобы оно было связано, но я все же хочу иметь этот эффект наведения. Так вот почему код такой:

<a>PONUDA</a>

Tbh, я никогда не думал об использовании привязки без значения href, поэтому несколько вопросов:

  1. Насколько действителен этот метод для использования состояния привязки :hover? Я знаю, что мог бы использовать js, но я просто хочу знать, нормально ли это решение, когда вы просто хотите использовать этот псевдоселектор: hover, так что просто css без js.
  2. Как насчет поисковых систем? Что они делают, когда доходят до тега привязки и видят, что в нем нет href? Ожидают ли они, что каждый тег привязки будет иметь href?

Я знаю, что это глупый вопрос, но любая ссылка на эту «проблему» была бы здоровой!


person Gavrisimo    schedule 06.07.2010    source источник


Ответы (5)


Большинство современных браузеров поддерживают использование псевдокласса :hover для тегов, отличных от a, поэтому вы можете просто применить их к своим тегам li, и даже в Internet Explorer существует множество обходных путей. Этот обходной путь вполне удобен, если вы не хотите использовать Javascript .

Что хорошо в использовании :hover на самих элементах li, на мой взгляд, так это то, что состояние наведения остается даже при переходе к одному из вложенных элементов списка (т.е. элементам подменю). Однако, если вы не совсем хотите этого эффекта, я бы посоветовал придерживаться тегов a (хотя и делать, как говорит Пекка).

person JAB    schedule 06.07.2010
comment
:hover на элементах без привязки может быть медленным в IE7, и поэтому его использование сомнительно - см. здесь: code.google.com/speed/page-speed/docs/rendering.html (ищите :hover без кавычек) - person Joscha; 06.07.2010
comment
@Joscha: Вы упоминаете об этом, но не упоминаете тот факт, что Whatever:hover использует выражения для обратных вызовов? В любом случае, хотя я нахожу вашу ссылку интересной для чтения с некоторыми полезными советами, все ли это необходимо для относительно небольших страниц? То есть насколько сильно влияет на производительность простое выпадающее меню с одним или двумя уровнями по сравнению со страницей, заполненной сотнями элементов, на которые нужно навести курсор? - person JAB; 06.07.2010
comment
(Кроме того, я не заметил какой-либо медлительности в IE7 для меню, которое я недавно реализовал. Что именно это означает в некоторых случаях? Или это упоминается в ссылке на отчет об ошибках Microsoft, и я должен просто создать Windows Live ID читать?) - person JAB; 06.07.2010
comment
в мелкомасштабном программировании большинство хакерских практик, как правило, прощаются;) Я просто хотел упомянуть, что это может быть проблемой - действительно ли это проблема для определенного сценария, зависит от глаз смотрящего . - person Joscha; 07.07.2010

<a href="#"> подойдет.

Но вместо этого вы можете указать href на резервную страницу, чтобы те, у кого нет Javascript, все еще могли перейти на страницу, содержащую ссылки на параметры подменю. Затем добавьте обработчик onclick, который возвращает false, чтобы браузеры с поддержкой Javascript (которые могут видеть ваше меню) не переходили по ссылке при нажатии.

Таким образом, вы рассмотрели все свои базы, а также оправдали для себя, почему этот атрибут href существует :)

person Ed Daniel    schedule 06.07.2010
comment
+1, но я все равно делаю это, это особые случаи, подобные этому, когда у меня нет родительской страницы, которая будет содержать ссылки на дополнительную навигацию (каждая ссылка является дочерней страницей)... Если бы у меня была страница под названием ponuda, а затем поместить каждую ссылку из поднавигация, чтобы быть дочерней страницей на странице ponuda, тогда я бы сделал это так же, как вы сказали, но опять же, это эти странные сценарии, когда я просто спрашиваю, что произойдет и что делать тогда... :) - person Gavrisimo; 06.07.2010

  1. Для меня это выглядит правильно, но если вам не нужно, чтобы он работал в IE6 или что-то в этом роде, раньше, нет причин, по которым вы не могли бы просто использовать span.

  2. Атрибут href является необязательным для a элементов.< br> Я не понимаю, почему поисковые системы ожидают существования каких-либо необязательных атрибутов, кроме того, в духе либерализма в отношении того, что вы принимаете. Даже если бы это было обязательным, я полагаю, что любая приличная поисковая система смогла бы справиться.

person Paul Butcher    schedule 06.07.2010
comment
Не знаю, почему кто-то проголосовал против ... Во всяком случае, что касается SE, я больше думал о 404 и тому подобном, например, может ли SE считать каждый якорь ссылкой, и если да, то отсутствие href может заставить SE сообщить об этом как о 404 ошибка... О_о - person Gavrisimo; 06.07.2010
comment
Я был бы удивлен, если бы какая-либо поисковая система тратила ресурсы, пытаясь посетить страницу по URL-адресу, только потому, что нашла пустой элемент. Обратите внимание: когда я говорю, что это действительно, я использую строгое определение термина. Ознакомьтесь с WAI и ARIA (w3.org/TR/wai-aria-practices), чтобы увидеть, что вы должны делать. - person Paul Butcher; 06.07.2010

Вам не нужно, чтобы элемент был якорем, насколько я знаю, псевдокласс :hover работает с любым действительным элементом DOM. Если вас это беспокоит, вы можете добавить href="#" к тегу.

person Community    schedule 06.07.2010
comment
@scanliffe, можете ли вы быть более точным в отношении более старых версий? - person Gavrisimo; 06.07.2010
comment
Кроме того, :hover на элементах без привязки может быть медленным в IE7 - см. здесь: code.google.com/speed/page-speed/docs/rendering.html (также есть ссылка на отчет об ошибке) - person Joscha; 06.07.2010
comment
@GaVrA scunliffe говорит об IE7 и IE8 без строгого типа документа, но даже в этом случае он не работает только для неякорных элементов. - person Joscha; 06.07.2010
comment
@Joscha: И IE6, тип документа или нет. (По крайней мере, если я правильно помню.) - person JAB; 06.07.2010

вы можете использовать <a href="#">...</a> или <a href="javascript:;">...</a>

без атрибута href недопустимая разметка

person 303    schedule 06.07.2010
comment
Не так. элемент a без атрибута href называется якорем - person Paul Butcher; 06.07.2010
comment
Я просто скопирую свой комментарий из другого ответа: html5, xhtml строгий, xhtml переходный, ни один из них не вызывает ничего, что связано с этим тегом привязки. также css также действителен, если вы игнорируете некоторые стили css3, которые я использую. - person Gavrisimo; 06.07.2010
comment
Взгляните на контекст — он выглядит как навигация, поэтому он должен иметь (imho) атрибут href; если вы поместите ‹a› внутри контента, тогда все в порядке; на данный момент это не имеет для меня смысла - person 303; 06.07.2010
comment
Ваше скромное мнение не меняет DTD для любой существующей версии HTML или XHTML. - person Paul Butcher; 06.07.2010
comment
Я согласен, в этом контексте вы ожидаете привязки (с href), но мой вопрос в том, почему мы должны использовать href, если это не недопустимая разметка, чтобы не использовать ее. как я уже сказал в комментариях к ответу @galambalazs, если я поставлю значение href в это ‹a›PONUDA‹/a›, вдруг это будет иметь для вас смысл? - person Gavrisimo; 06.07.2010
comment
Вы можете ошибаться в недопустимой разметке, но javascript:; Помоги мне. Благодарю. - person aberaud; 02.02.2013