Шаблон:Hover: различия между версиями

← Предыдущая правкаСледующая правка →
ВизуальныйВики-текст
Als (обсуждение | вклад)
298 правок
Нет описания правки
Als (обсуждение | вклад)
298 правок
Нет описания правки
Строка 3: Строка 3:


== Как использовать ==
== Как использовать ==
Вставьте шаблон в формате:
<pre>
<pre>
{{Hover|Первоначальное содержимое|Содержимое при наведении|До=|После=}}
{{Hover|Первоначальное содержимое|Содержимое при наведении|До=|После=}}
</pre>
</pre>


* '''Первоначальное содержимое''' — то, что видно по умолчанию.
* '''Первоначальное содержимое''' — отображается по умолчанию.
* '''Содержимое при наведении''' — появляется при наведении.
* '''Содержимое при наведении''' — появляется при наведении.
* Необязательные параметры:
* '''До=''' — опционально, до контейнера.
** '''До=''' — текст или элементы перед контейнером.
* '''После=''' — опционально, после контейнера.
** '''После=''' — текст или элементы после контейнера.


== Примеры ==
== Примеры ==


=== С изображениями ===
=== Изображения ===
Код:
<pre>
{{Hover|[[File:Example.jpg|200px]]|[[File:Hover_Example.jpg|200px]]}}
{{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|Наведи на меня|А вот и я!}}
{{Hover|Наведи на меня|А вот и я!}}


=== С дополнительным текстом (До/После) ===
=== С дополнительным текстом ===
Код:
<pre>
{{Hover|До=( |[[File:Example.jpg|150px]]|[[File:Hover_Example.jpg|150px]]|После= )}}
</pre>
Результат: 
( [изображение] ) → при наведении ( [другое изображение] )
 
{{Hover|До=( |[[File:Example.jpg|150px]]|[[File:Hover_Example.jpg|150px]]|После= )}}
{{Hover|До=( |[[File:Example.jpg|150px]]|[[File:Hover_Example.jpg|150px]]|После= )}}


== Примечания ==
== Примечания ==
* Убедитесь, что файлы существуют в вики.
* Убедитесь, что файлы существуют.
* Можно использовать любые валидные вики-элементы.
* Для работы анимации должен быть добавлен CSS в MediaWiki:Common.css.
* Плавная анимация работает во всех современных браузерах.
</noinclude>
</noinclude>


Строка 58: Строка 32:
   <span class="hover__content">{{{2}}}</span>
   <span class="hover__content">{{{2}}}</span>
{{{После|}}}</span>
{{{После|}}}</span>
{{#css:
/* Контейнер — обеспечивает правильное позиционирование */
.hover__container {
    display: inline-block;
    position: relative;
    cursor: default;
}
/* Базовое содержимое (по умолчанию) */
.hover__default-content,
.hover__content {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 1;
    visibility: visible;
}
/* Скрытие при наведении */
.hover__container:hover .hover__default-content {
    opacity: 0;
    visibility: hidden;
}
/* Показ нового содержимого при наведении */
.hover__content {
    opacity: 0;
    visibility: hidden;
}
.hover__container:hover .hover__content {
    opacity: 1;
    visibility: visible;
}
}}

Версия от 11:20, 4 августа 2025

Шаблон позволяет заменить изображение или текст при наведении курсора мыши — плавно и красиво.

Как использовать

{{Hover|Первоначальное содержимое|Содержимое при наведении|До=|После=}}
  • Первоначальное содержимое — отображается по умолчанию.
  • Содержимое при наведении — появляется при наведении.
  • До= — опционально, до контейнера.
  • После= — опционально, после контейнера.

Примеры

Изображения

 Файл:Example.jpg
 Файл:Hover Example.jpg

Текст

 Наведи на меня
 А вот и я!

С дополнительным текстом

( 

 Файл:Example.jpg
 Файл:Hover Example.jpg

)

Примечания

  • Убедитесь, что файлы существуют.
  • Для работы анимации должен быть добавлен CSS в MediaWiki:Common.css.


 {{{1}}}
 {{{2}}}

Источник — http://mini-station-14.ru//index.php?title=Шаблон:Hover&oldid=603