[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: иконка мышки при наведении на <a>
Страницы: 1, 2
Ramzes_Ra
Если у тега <a> указан атрибут href, то при наведении мышка меняет иконку на руку, и это удобно. Однако, если href не указывать, то иконка как при редактировании текста, что не удобно.
Есть путь решения этой проблемы через js. Например
function ChangeImage(id,image)
{
var el=document.getElementById(id);
el.src=image;
}

<img src="pic.jpg" id="imag" onmouseover="ChangeImage('imag','/img1.gif')"  onmouseout="ChangeImage('imag','/img2.gif')" >


НО. Можно ли в CSS или где прописать, чтобы <a> без href тоже выводилась та же иконка, как и при наведении на обычную ссылку?
twin
<a> без атрибута href - это анкер. Потому и нет руки. Нужно так писать:
<a href="#" >


_____________
Если вам недостаточно собственных заблуждений, можно расширить их мнениями экспертов.

Нужно уважать мнение оппонета. Ведь заблуждаться - его святое право.

Настаивал, настаиваю и буду настаивать на своем. На кедровых орешках.

user posted image
Ramzes_Ra
Цитата (twin @ 25.08.2013 - 16:06)
<a> без атрибута href - это анкер. Потому и нет руки. Нужно так писать:
<a href="#" >

Примного благодарен smile.gif очень простое решение, я всегда всё усложняю unsure.gif
twin
Тут есть тонкость. Дело в том, что если ссылка внизу страницы, то при нажатии она будет проматываться вверх. Решение не менее простое:
<a href="#" onclick="return false">


_____________
Если вам недостаточно собственных заблуждений, можно расширить их мнениями экспертов.

Нужно уважать мнение оппонета. Ведь заблуждаться - его святое право.

Настаивал, настаиваю и буду настаивать на своем. На кедровых орешках.

user posted image
Ramzes_Ra
Цитата (twin @ 25.08.2013 - 17:04)
Тут есть тонкость. Дело в том, что если ссылка внизу страницы, то при нажатии она будет проматываться вверх. Решение не менее простое:
<a href="#" onclick="return false">

Ничего себе, я сначала не понял, а потом врубился :D Спасибо, действительно стоящая вещь.. Хотя я и не понимаю как это работает
sergeiss
Цитата (Ramzes_Ra @ 25.08.2013 - 19:51)
НО. Можно ли в CSS или где прописать, чтобы <a> без href тоже выводилась та же иконка, как и при наведении на обычную ссылку?

Укажи в стиле для данного объекта (или сделай класс для этого); работает для любого объекта на странице, к тому же выбор указателей достаточно обширный:
#imag
{
cursor:pointer;
}


_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
DedMorozzz
Цитата (twin @ 25.08.2013 - 20:04)
Тут есть тонкость. Дело в том, что если ссылка внизу страницы, то при нажатии она будет проматываться вверх. Решение не менее простое:
<a href="#" onclick="return false">

Но тогда и использовать тег А не стоит, если как ссылка не используется
Если ссылка не нужна - для такой цели вполне подойдёт тег span, со стилями, которые написал sergeiss

_____________
Если не говорить пользователям, что Linux это "Сложно и страшно", то им совершенно всё равно, в чём не разбираться
FatCat
Цитата (twin @ 25.08.2013 - 20:04)
Решение не менее простое:
<a href="#" onclick="return false">

Предпочитаю:
<a href="javascript:;">


_____________
Бесплатному сыру в дырки не заглядывают...
twin
Цитата (DedMorozzz @ 26.08.2013 - 07:14)
Но тогда и использовать тег А не стоит, если как ссылка не используется
Если ссылка не нужна - для такой цели вполне подойдёт тег span, со стилями, которые написал sergeiss

Иногда как раз нужно вид ссылки. Причем общий вид, с форматированием как все ссылки блока. Можно конечно придать посредством CSS его и span'у, но зачем? А вот отметить посещенные ссылки вообще никак помоему...

_____________
Если вам недостаточно собственных заблуждений, можно расширить их мнениями экспертов.

Нужно уважать мнение оппонета. Ведь заблуждаться - его святое право.

Настаивал, настаиваю и буду настаивать на своем. На кедровых орешках.

user posted image
DedMorozzz
Цитата (twin @ 26.08.2013 - 10:58)

Иногда как раз нужно вид ссылки. Причем общий вид, с форматированием как все ссылки блока. Можно конечно придать посредством CSS его и span'у, но зачем? А вот ометить посещенные ссылки вообще никак помоему...

Ну да, насчёт посещения - согласен.
А в целом, изменение курсора и подчёркивание при наведении реализуется 2мя простыми стилями.
cursor:pointer и text-decoration:underline, который вешается на hover

_____________
Если не говорить пользователям, что Linux это "Сложно и страшно", то им совершенно всё равно, в чём не разбираться
twin
Цитата (DedMorozzz @ 26.08.2013 - 08:02)
Ну да, насчёт посещения - согласен.
А в целом, изменение курсора и подчёркивание при наведении реализуется 2мя простыми стилями.
cursor:pointer и text-decoration:underline, который вешается на hover

Ты не понял. Ссылки могут быть достаточно серьёзно отформатированы. Шрифт, цвет текста, цвет ролловера, бэкграунд да и мало ли еще чего. Все это придется дублировать для спана. Стоит оно того?

_____________
Если вам недостаточно собственных заблуждений, можно расширить их мнениями экспертов.

Нужно уважать мнение оппонета. Ведь заблуждаться - его святое право.

Настаивал, настаиваю и буду настаивать на своем. На кедровых орешках.

user posted image
inpost
Лучше бы обратили внимание на то, как работают оба примера в мобильных устройствах. Но лучше всего сравнить с несколькими 2010-2013 годов.

Вторым пунктом, когда надо писать через <a> - когда это переходы между контентом А и Б, то есть чтобы поисковики получили контент Б, а именно спарсили ссылку, то она должна быть <a>.

И третье: для <a> нам нужно будет return false прописывать, или как показал ФатКет через javascript, а для span ничего подобного делать не надо.

_____________
Обучаю веб-программированию качественно и не дорого: http://school-php.com
Фрилансер, принимаю заказы: PHP, JS, AS (видео-чаты). Писать в ЛС (Личные сообщения на phpforum).
twin
1. Причем тут мобильники вообще? Ссылка без перехода работает только с JS и мобильники тут вообще не в тему. Хоть спаном делай, хоть чертом лысым. Все равно JS нужен.

2. Причем тут поисковики вообще? Ну спарсит он ссылку, увидит в адресе это # и что? Чем это навредит индексации?

3. return false нужно прописывать в функции, которую вызывает ссылка. Просто нужно её возвращать:
<a href="#" onclick="return my_funct()">
Если ссылка не вызывает функцию, то тогда она действительно нафиг не нужна. Но если вызывет, то прописывать так и так. А вот кучу стилей для ссылок дублировать для спана - это лишняя работа. потом если что подправить - в двух местах придется.


_____________
Если вам недостаточно собственных заблуждений, можно расширить их мнениями экспертов.

Нужно уважать мнение оппонета. Ведь заблуждаться - его святое право.

Настаивал, настаиваю и буду настаивать на своем. На кедровых орешках.

user posted image
inpost
1. Ты, наверное, мало следишь за посетителями сайтов. Сейчас всё больше и больше людей ходят на сайты с планшетов и мобильных устройств.

2. А при том. Если тебе не нужна адекватная СЕО-базовая оптимизация, то зачем плохому учить других? Некоторые считают её необходимой.

3. css:
a,.link {}
a:hover,.link:hover {}

Править в двух местах не надо, достаточно использовать запятую, стандартная практика. А избежать CSS не получится, потому что часть ссылок может быть на светлом фоне, часть на тёмном, всё равно одни ссылки будут один стиль иметь, другие - другой. А если не веришь, то можешь смело открыть любой сайт, тот же гугл, и увидишь: <a class="gbzt">, итого даже те же теги a имеют свои классы.

_____________
Обучаю веб-программированию качественно и не дорого: http://school-php.com
Фрилансер, принимаю заказы: PHP, JS, AS (видео-чаты). Писать в ЛС (Личные сообщения на phpforum).
inpost
По пункту №1 дополнение:
http://www.liveinternet.ru/stat/phpforum.ru/browsers.html
и
http://www.liveinternet.ru/stat/phpforum.ru/oses.html

и это в нашей бедной стране) В той же Европе или Америке эти проценты значительно выше. Да и у нас через пару лет показатели станут выше.

_____________
Обучаю веб-программированию качественно и не дорого: http://school-php.com
Фрилансер, принимаю заказы: PHP, JS, AS (видео-чаты). Писать в ЛС (Личные сообщения на phpforum).
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.