0 Пользователей и 1 Гость просматривают эту тему.
  • 4 Ответов
  • 238 Просмотров
*

Pavel_L

  • Осваиваюсь на форуме
  • 29
  • 0 / 0
Здравствуйте форумчане))

Нужно сделать кнопку чтобы текст на ней менялся при наведении, можно и фон затронуть, но самая суть вопроса в тексте на кнопке.
Кнопка должна будет работать только в таком режиме, более от нее не требуется.
Например: на кнопке надпись "позвонить" меняется на "x xxx xxx xx xx"
Желательно чтобы это был текст, и пользователь сразу мог позвонить если зашел на страницу с мобильного.
Может кто подскажет решение?

PS Кнопки тоже не доводилось делать, не помешало бы решения для реализации всего в целом  ^-^
PPS Нашел вариант с подменой картинки одна на другую при наведении, но не то..
*

Aleks.Denezh

  • Живу я здесь
  • 3362
  • 416 / 4
Если честно то даже не смешно, это основы HTML и CSS которые никак не относятся к Joomla!
Код
 <a href="tel:xxxxxxxx" class="link-phone"></a>
 <style>
.link-phone:after{content: 'Позвонить'}
.link-phone:hover:after{content: 'xxxxxxxx'; };
</style>
*

Pavel_L

  • Осваиваюсь на форуме
  • 29
  • 0 / 0
Я этого не знал, Спасибо  ^-^

Для мобильных конечно хороший вариант, но для ПК не очень: возможность нажать на ссылку остается, и при нажатии появляется окно "с помощью чего хотите открыть ссылку".
Нет ли другого варианта, чтобы оформлено было не как ссылка? Просто текст с заменой при наведении и возврат в предыдущее положение при уходе курсора.

Может быть ссылку закрыть? Видел, что можно с помощью "#", но как это сделать, не пойму..  :(
Если здесь это применимо.
Или реализовать без <a href=..
« Последнее редактирование: 10.05.2018, 18:28:33 от Pavel_L »
*

fbr

  • Завсегдатай
  • 1366
  • 157 / 6

Код
 <a href="tel:xxxxxxxx" class="link-phone"></a>
 <style>
.link-phone:after{content: 'Позвонить'}
.link-phone:hover:after{content: 'xxxxxxxx'; };
</style>

Ну поставьте вместо a блок div ... делов-то ))
*

effrit

  • Легенда
  • 8864
  • 977 / 9
  • effrit.com
не надо ничего заменять.
все правильно работает. если для широкоформатов не нужна ссылка, то отменяете её через CSS правило

pointer-events: none;

прописанное в @ media условие.
идем читать в Google.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Дополнительное поле для вывода вступительного текста к новостям

Автор Merk

Ответов: 0
Просмотров: 79
Последний ответ 10.11.2018, 18:26:12
от Merk
Автоматическое ограничение количества символов вводного текста

Автор Toxa33

Ответов: 48
Просмотров: 8941
Последний ответ 05.11.2018, 15:08:08
от autokaif
Изменение текста в кнопках пагинации

Автор serzh-serega

Ответов: 5
Просмотров: 126
Последний ответ 26.09.2018, 10:32:35
от NewUsers
Кнопка для скачивания

Автор phvsfpgs

Ответов: 8
Просмотров: 216
Последний ответ 20.08.2018, 18:49:59
от rkron
Всплывающее событие при наведении на дату в JEvents календаре

Автор anyt04ka

Ответов: 0
Просмотров: 86
Последний ответ 12.07.2018, 10:11:26
от anyt04ka