Шаблон:Hover: различия между версиями
Als (обсуждение | вклад) Новая страница: «<noinclude>Шаблон позволяет заменить картинку (или даже текст) при наведении<br><!-- --></noinclude><span class="hover__container">{{{До|}}}<span class="hover__default-content">{{{1}}}</span><span class="hover__content">{{{2}}}</span>{{{После|}}}</span> {{#css: .hover__content { top: 0; left: 0; display: none; } .hover__container:hover .hover__content { display: inline; } .hover__container:ho...» |
Als (обсуждение | вклад) Нет описания правки |
||
| (не показано 5 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
- | <noinclude> | ||
Шаблон позволяет заменить изображение или текст при наведении курсора мыши. | |||
== Как использовать == | |||
Вставьте шаблон в формате: | |||
<pre> | |||
{{Hover|Первоначальное содержимое|Содержимое при наведении|До=|После=}} | |||
</pre> | |||
* '''Первоначальное содержимое''' — то, что видно по умолчанию (например, изображение или текст). | |||
* '''Содержимое при наведении''' — то, что появится при наведении курсора. | |||
* Необязательные параметры: | |||
** '''До=''' — текст или элементы перед контейнером. | |||
** '''После=''' — текст или элементы после контейнера. | |||
== Примеры == | |||
=== С изображениями === | |||
Код: | |||
<pre> | |||
{{Hover|[[File:Example.jpg|200px]]|[[File:Hover_Example.jpg|200px]]}} | |||
</pre> | |||
Что делает: | |||
* По умолчанию отображается [[File:Example.jpg|200px]]. | |||
* При наведении заменяется на [[File:Hover_Example.jpg|200px]]. | |||
{{Hover|[[File:Example.jpg|200px]]|[[File:Hover_Example.jpg|200px]]}} | |||
=== С текстом === | |||
Код: | |||
<pre> | |||
{{Hover|Наведи на меня|А вот и я!}} | |||
</pre> | |||
Что делает: | |||
* По умолчанию видно: "Наведи на меня". | |||
* При наведении появляется: "А вот и я!". | |||
{{Hover|Наведи на меня|А вот и я!}} | |||
=== С дополнительным текстом (До/После) === | |||
Код: | |||
<pre> | |||
{{Hover|До=( |[[File:Example.jpg|150px]]|[[File:Hover_Example.jpg|150px]]|После= )}} | |||
</pre> | |||
Результат: | |||
( [изображение] ) → при наведении ( [другое изображение] ) | |||
{{Hover|До=( |[[File:Example.jpg|150px]]|[[File:Hover_Example.jpg|150px]]|После= )}} | |||
== Примечания == | |||
* Убедитесь, что файлы существуют в вики. | |||
* Можно использовать любые валидные вики-элементы: ссылки, кнопки, иконки и т.д. | |||
* Работает в браузерах, поддерживающих CSS :hover (все современные). | |||
</noinclude> | |||
<span class="hover__container">{{{До|}}}<span class="hover__default-content">{{{1}}}</span><span class="hover__content">{{{2}}}</span>{{{После|}}}</span> | |||
{{#css: | {{#css: | ||
.hover__content { | .hover__content { | ||
top: 0; | |||
left: 0; | |||
display: none; | |||
} | } | ||
.hover__container:hover .hover__content { | .hover__container:hover .hover__content { | ||
display: inline; | |||
} | } | ||
.hover__container:hover .hover__default-content { | .hover__container:hover .hover__default-content { | ||
display: none; | |||
} | } | ||
}} | }} | ||
Текущая версия от 11:32, 4 августа 2025
Шаблон позволяет заменить изображение или текст при наведении курсора мыши.
Как использовать
Вставьте шаблон в формате:
{{Hover|Первоначальное содержимое|Содержимое при наведении|До=|После=}}
- Первоначальное содержимое — то, что видно по умолчанию (например, изображение или текст).
- Содержимое при наведении — то, что появится при наведении курсора.
- Необязательные параметры:
- До= — текст или элементы перед контейнером.
- После= — текст или элементы после контейнера.
Примеры
С изображениями
Код:
{{Hover|[[File:Example.jpg|200px]]|[[File:Hover_Example.jpg|200px]]}}
Что делает:
- По умолчанию отображается Файл:Example.jpg.
- При наведении заменяется на Файл:Hover Example.jpg.
Файл:Example.jpgФайл:Hover Example.jpg
С текстом
Код:
{{Hover|Наведи на меня|А вот и я!}}
Что делает:
- По умолчанию видно: "Наведи на меня".
- При наведении появляется: "А вот и я!".
Наведи на меняА вот и я!
С дополнительным текстом (До/После)
Код:
{{Hover|До=( |[[File:Example.jpg|150px]]|[[File:Hover_Example.jpg|150px]]|После= )}}
Результат: ( [изображение] ) → при наведении ( [другое изображение] )
(Файл:Example.jpgФайл:Hover Example.jpg)
Примечания
- Убедитесь, что файлы существуют в вики.
- Можно использовать любые валидные вики-элементы: ссылки, кнопки, иконки и т.д.
- Работает в браузерах, поддерживающих CSS :hover (все современные).
{{{1}}}{{{2}}}