Текст при наведении на картинку в html: Как добавить всплывающую подсказку к изображению?

Разное 

Содержание

Как сделать чтобы при наведении на картинку появлялся текст в html

Салютики!
Мне на ушко прошептал wordstat.yandex.ru, что вы ищите эффект, когда при наведении на текст появляется скрытый текст или картинка. В этой статье я не только выложу код этого эффекта, но и покажу, как сделать, чтобы при наведении текст или картинка появлялись и исчезали. Код не сложный, написан на обычном HTML+CSS.
Этот эффект можно использовать:

— если нужно вставить скрытую подсказку к слову;

— если нужно показать ответ на загадку;

— если нужно показать вариант ответа на тест;

— и другие варианты

○ При наведении на текст, появляется скрытый текст

В HTML вставьте вот этот код:

○ При наведении на текст, появляется картинка

В HTML вставьте вот этот код:

○ При наведении на текст, исчезает блок div с текстом

В HTML вставьте вот этот код:

○ При наведении на текст, исчезает блок div с картинкой

В HTML вставьте вот этот код:

Вы нашли то, что искали?! Если да, тогда в знак благодарности жмите на кнопку социальных сетей, которая размещена снизу.
Да, и подписывайтесь на обновления моего блога, здесь много вкусных тем.

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

я так понимаю это реализуется с помощью javascript?

Ссылка на комментарий
Поделиться на других сайтах

15 ответов на этот вопрос

  • Сортировать по голосам
  • Сортировать по дате

Рекомендованные сообщения

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Всплывающий текст на изображении при наведении на него мышкой — довольно популярный и красивый визуальный эффект, который часто используют в своей работе многие программисты. Реализовать такую штуку довольно просто, в своем уроке я буду использовать исключительно CSS3. Это легко и просто.

Для работы нам понадобится исполняемый файл и картинка. Код, который нужно вставить, следующий:

Ну вот собственно и все. Теперь на картинку накладывается блок с текстом, в котором можно разместить все, что угодно. Очень удобно.

Весь Интернет перерыл, не нашел ничего толкового. Смысл прост: при наведении мышью на картинку она должна затемняться чуть-чуть. И внутри блока-картинки появлялся текст. Прошу помочь.

Пара идей для вдохновения (codrops):

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

дизайн сайта / логотип © 2022 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2022.1.7.41110

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Форматирование текста карточек — Teams

Twitter LinkedIn Facebook Адрес электронной почты

  • Статья

Ниже приводится два способа добавления форматирования текста в карточки:

  • Markdown
  • HTML

Карточки не поддерживают форматирование в свойствах заголовка или подзаголовка, но поддерживают его в свойстве текста. Форматирование можно задать с помощью подмножества для форматирования XML либо HTML или Markdown в зависимости от типа карточки. Для текущей и будущей разработки адаптивных карточек рекомендуется форматирование Markdown.

Поддержка форматирования зависит от типа карточки. Отрисовка карта может немного отличаться между настольными и мобильными клиентами Microsoft Teams, а также Teams в классическом браузере.

Вы можете включить встроенный рисунок в любую карточку Teams. Поддерживаемые форматы изображений: PNG, JPG, GIF. Используйте размеры в пределах 1024 x 1024 пикселей и размер файла менее 1 МБ. Анимированные .gif изображения не поддерживаются. Дополнительные сведения см. в разделе Типы карточек.

Адаптивные карточки и карточки соединителей можно форматировать для Группы Microsoft 365 с помощью Markdown, включающих определенные поддерживаемые стили.

Форматирование карточек с помощью Markdown

Следующие типы карточек поддерживают форматирование Markdown в Teams:

  • Адаптивные карточки: Markdown поддерживается в поле Адаптивная карточка Textblock и Fact.
    Title    Fact.Value. HTML не поддерживается в адаптивных карточках.
  • Карточки соединителей для Группы Microsoft 365: markdown и ограниченный HTML поддерживаются в карточках соединителей для Группы Microsoft 365 в текстовых полях.

Примечание.

Markdown не поддерживается для карточек входа OAuth в ботах.

Вы можете использовать новые строки для адаптивных карточек с помощью escape-последовательности \r или \n для новых строк в списках. Форматирование адаптивных карточек отличается в классической и мобильной версиях Teams. Упоминания на основе карточек поддерживаются в классическом, мобильном и веб-клиенте. Вы можете использовать свойство маскировки информации для маскировки определенных сведений, например пароля или конфиденциальной информации от пользователей, во входном элементе

Input.Text адаптивной карточки. Ширину адаптивной карточки можно увеличить с помощью объекта width. Вы можете включить поддержку опережающего ввода в адаптивных карточках и отфильтровать варианты ввода при наборе входных данных пользователем. Свойство
msteams можно использовать для добавления возможности выборочного отображения изображений в представлении «Экран».

Форматирование адаптивных карточек и карточек соединителей отличается в классической и мобильной версиях Teams. В этом разделе можно ознакомиться с примером форматирования Markdown для адаптивных карточек и карточек соединителей.

  • Форматирование Markdown для адаптивных карточек
  • Формат Markdown для карточек соединителей для Группы Microsoft 365

В таблице ниже указаны поддерживаемые стили для Textblock, Fact.Title и Fact.Value:

StyleПримерMarkdown
ПолужирныйBold**Bold**
КурсивItalic_Italic_
Неупорядоченный список
  • текст
  • текст
- Item 1\r- Item 2\r- Item 3
Упорядоченный список
  1. текст
  2. текст
1. Green\r2. Orange\r3. Blue
ГиперссылкиBing[Title](url)

Следующие теги Markdown не поддерживаются:

  • Заголовки
  • Таблицы
  • изображения;
  • Предварительно отформатированный текст
  • Цитаты

Новые строки для адаптивных карточек

Вы можете использовать escape-последовательность \r или \n для новых строк в списках. Использование \n\n в списках приводит к добавлению отступа перед следующим элементом в списке. Если вам нужны новые строки где либо еще в TextBlock, используйте \n\n.

Различия, связанные с адаптивными карточками, в классической и мобильной версиях

В классической версии форматирование Markdown для адаптивных карточек отображается в веб-браузерах и в клиентском приложении Teams следующим образом:

В iOS форматирование Markdown для адаптивных карточек отображается следующим образом:

В Android форматирование Markdown для адаптивных карточек отображается следующим образом:

Дополнительные сведения см. в разделе Текстовые функции в адаптивных карточках.

Примечание.

Функции даты и локализации, упомянутые в этом разделе, не поддерживаются в Teams.

Пример форматирования адаптивных карточек

В следующем коде показан пример форматирования адаптивных карточек:

{
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "This is some **bold** text"
        },
        {
            "type": "TextBlock",
            "text": "This is some _italic_ text"
        },
        {
            "type": "TextBlock",
            "text": "- Bullet \r- List \r",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "1. Numbered\r2. List\r",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Check out [Adaptive Cards](https://adaptivecards.io)"
        }
    ]
}

Адаптивные карточки поддерживают эмодзи.

В следующем коде показан пример адаптивных карточек с эмодзи:

{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "Container", "items": [ { "type": "TextBlock", "text": "Publish Adaptive Card with emojis 🥰 ", "weight": "bolder", "size": "medium" }, ] }, ], }

Примечание.

Если вы используете REST API, задайте charset=UTF-8 в заголовках запроса эмодзи для добавления эмодзи в адаптивные карточки.

Поддержка упоминаний в адаптивных карточках

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

Боты и расширения для обмена сообщениями могут включать упоминания в содержимом карточки в элементах TextBlock и FactSet.

Примечание.

  • Элементы мультимедиа в настоящее время не поддерживаются в адаптивных карточках на платформе Teams.
  • Упоминания о каналах и командах не поддерживаются в сообщениях бота.
  • Вы можете @mention использовать несколько пользователей в одном сообщении адаптивной карточки, однако убедитесь, что размер сообщения не превышает 28 КБ для входящих веб-перехватчиков и 40 КБ для сообщения бота.

Чтобы включить упоминание в адаптивную карточку, ваше приложение должно содержать следующие элементы:

  • <at>username</at> в поддерживаемых элементах адаптивной карточки.
  • Объект mention в свойстве msteams в содержимом карточки включает ИД пользователя Teams упоминаемого пользователя.
  • userId является уникальным для идентификатора бота и определенного пользователя. Его можно использовать для @mention определенного пользователя. userId можно получить с помощью одного из параметров, указанных в разделе Получение ИД пользователя.
Пример адаптивной карточки с упоминанием

В следующем коде показан пример адаптивной карточки с упоминанием:

{
  "contentType": "application/vnd. microsoft.card.adaptive",
  "content": {
    "type": "AdaptiveCard",
    "body": [
      {
        "type": "TextBlock",
        "text": "Hi <at>John Doe</at>"
      }
    ],
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0",
    "msteams": {
      "entities": [
        {
          "type": "mention",
          "text": "<at>John Doe</at>",
          "mentioned": {
            "id": "29:123124124124",
            "name": "John Doe"
          }
        }
      ]
    }
  }
}

Платформа Teams позволяет упоминать пользователей с ИД объекта Azure Active Directory и именем участника-пользователя (UPN), помимо существующих идентификаторов упоминаний. Боты с адаптивными карточками и соединители с входящими веб-перехватчиками поддерживают два идентификатора упоминаний пользователей.

В таблице ниже описываются идентификаторы упоминаний пользователей, которые поддерживаются с недавнего времени:

ИдентификаторыВспомогательные возможностиОписаниеПример
идентификатор объекта Azure ADБот, соединительAzure AD идентификатор объекта пользователя49c4641c-ab91-4248-aebb-6a7de286397b
Имя участника-пользователяБот, соединительИмя участника-пользователя Azure Active Directoryjohn. [email protected]
Упоминание пользователей в ботах с адаптивными карточками

Боты поддерживают упоминание пользователей с ИД объекта Azure Active Directory и именем участника-пользователя, помимо существующих идентификаторов. Поддержка двух новых идентификаторов доступна в ботах для текстовых сообщений, текстах адаптивных карточек и ответах расширения для обмена сообщениями. Боты поддерживают идентификаторы упоминаний в беседе и сценариях invoke. Пользователь получает уведомление веб-канала действий при наличии @mentioned идентификаторов.

Примечание.

Обновление схемы и изменения пользовательского интерфейса и пользовательского интерфейса не требуются для упоминаний пользователей с адаптивными карточками в Боте.

Пример

Пример упоминания пользователей в ботах с адаптивными карточками:

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0",
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "text": "Hi <at>Adele UPN</at>, <at>Adele Azure AD</at>"
    }
  ],
  "msteams": {
    "entities": [
      {
        "type": "mention",
        "text": "<at>Adele UPN</at>",
        "mentioned": {
          "id": "AdeleV@contoso. onmicrosoft.com",
          "name": "Adele Vance"
        }
      },
      {
        "type": "mention",
        "text": "<at>Adele Azure AD</at>",
        "mentioned": {
          "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd",
          "name": "Adele Vance"
        }
      }
    ]
  }
}

На изображении ниже показано упоминание пользователя в адаптивной карточке в боте:

Упоминание пользователя во входящем веб-перехватчике с адаптивными карточками

Входящие веб-перехватчики начинают поддерживать упоминание пользователей в адаптивных карточках с ИД объекта Azure Active Directory и именем участника-пользователя.

Примечание.

  • Включите упоминание пользователей в схеме входящих веб-перехватчиков для поддержки ИД объекта Azure Active Directory и имени участника-пользователя.
  • Изменения пользовательского интерфейса и пользовательского интерфейса не требуются для упоминаний пользователей с идентификатором объекта Azure AD и имени участника-пользователя.
Пример

Пример упоминания пользователя во входящем веб-перехватчике:

{
    "type": "message",
    "attachments": [
        {
        "contentType": "application/vnd.microsoft.card.adaptive",
        "content": {
            "type": "AdaptiveCard",
            "body": [
                {
                    "type": "TextBlock",
                    "size": "Medium",
                    "weight": "Bolder",
                    "text": "Sample Adaptive Card with User Mention"
                },
                {
                    "type": "TextBlock",
                    "text": "Hi <at>Adele UPN</at>, <at>Adele Azure AD</at>"
                }
            ],
            "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
            "version": "1.0",
            "msteams": {
                "entities": [
                    {
                        "type": "mention",
                        "text": "<at>Adele UPN</at>",
                        "mentioned": {
                          "id": "AdeleV@contoso. onmicrosoft.com",
                          "name": "Adele Vance"
                        }
                      },
                      {
                        "type": "mention",
                        "text": "<at>Adele Azure AD</at>",
                        "mentioned": {
                          "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd",
                          "name": "Adele Vance"
                        }
                      }
                ]
            }
        }
    }]
}

На изображении ниже показано упоминание пользователя во входящем веб-перехватчике:

Маскировка сведений в адаптивных карточках

Используйте свойство маскировки информации для маскировки определенных сведений, например пароля или конфиденциальной информации от пользователей, во входном элементе Input.Text адаптивной карточки.

Примечание.

Эта функция поддерживает только маскировку клиентской информации. Маскируемый текст ввода отправляется в виде открытого текста на адрес конечной точки HTTPS, указанный при настройке бота.

Чтобы замаскировать сведения в адаптивных карточках, добавьте style свойство в типinput.text и присвойте ей значение Пароль.

Пример адаптивной карточки со свойством маскировки

В следующем коде показан пример адаптивной карточки со свойством маскировки:

{
    "type": "Input.Text",
    "id": "secretThing",
    "style": "password",
},

На изображении ниже приводится пример маскировки сведений в адаптивных карточках:

Полноширинная адаптивная карточка

С помощью свойства msteams можно увеличить ширину адаптивной карточки и использовать дополнительное пространство холста. В следующем разделе приводятся сведения об использовании этого свойства.

Примечание.

Протестируйте полноширийную адаптивную карточку в узких форм-факторах, таких как мобильные панели и панели для собраний, чтобы убедиться, что содержимое не усечено.

Создание полноширинных карточек

Чтобы создать полноширинную адаптивную карточку, для объекта width в свойстве msteams в содержимом карточки необходимо задать значение Full.

Пример полноширинной адаптивной карточки

Чтобы создать полноширинную адаптивную карточку, приложение должно включать элементы из следующего примера кода:

{
    "type": "AdaptiveCard",
    "body": [{
        "type": "Container",
        "items": [{
            "type": "TextBlock",
            "text": "Digest card",
            "size": "Large",
            "weight": "Bolder"
        }]
    }],
    "msteams": {
        "width": "Full"
    },
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

На изображении ниже показана полноширинная адаптивная карточка:

На изображении ниже показано стандартное представление адаптивной карточки, если для свойства width не задано значение Полная ширина:

Поддержка опережающего ввода

В элементе схемы Input.Choiceset фильтрация многочисленных вариантов и выбор подходящего пользователями может значительно замедлить выполнение задачи. Поддержка опережающего ввода в адаптивных карточках может упростить выбор, сужая или фильтруя варианты ввода при наборе входных данных пользователем.

Чтобы включить опережающий ввод в Input.Choiceset, задайте для style значение filtered и убедитесь, что для isMultiSelect задано значение false.

Пример адаптивной карточки с поддержкой опережающего ввода

В следующем коде показан пример адаптивной карточки с поддержкой опережающего ввода:

{
   "type": "Input.ChoiceSet",
   "label": "Select a user",
   "isMultiSelect": false,
   "choices":  [
      { "title": "User 1", "value": "User1" },
      { "title": "User 2", "value": "User2" }
    ],
   "style": "filtered"
}

Представление «Экран» для изображений в адаптивных карточках

В адаптивной карточке можно использовать свойство msteams для добавления возможности выборочного отображения изображений в представлении «Экран». При наведении курсора на изображения пользователи могут видеть значок «Развернуть», для которого атрибут allowExpand имеет значение true. Ниже приведен пример msteams свойства :

{
    "type": "AdaptiveCard",
     "body": [
          {
            "type": "Image",
            "url": "https://picsum.photos/200/200?image=110",
            "msTeams": {
              "allowExpand": true
            }
          }
     ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

При наведении указателя мыши на изображение в правом верхнем углу отображается значок развертывания, как показано на следующем рисунке:

Изображение отображается в представлении «Экран», когда пользователь нажимает значок «Развернуть», как показано на изображении ниже:

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

Примечание.

  • Возможность увеличения и уменьшения применяется только к элементам изображения типа изображения в адаптивной карточке.
  • В мобильных приложениях Teams функциональность представления «Экран» для изображений в адаптивных карточках доступна по умолчанию. Пользователи могут просматривать изображения в адаптивных карточках в представлении «Экран», просто нажав на изображение, независимо от наличия атрибута allowExpand.
  • Представление этапа для изображений в адаптивных карточках не поддерживает изображения в кодировке Base64.

Адаптивная карточка в Teams поддерживает меню переполнения. Вы можете заполнить меню переполнения для всех дополнительных действий в адаптивной карточке. Меню переполнения в адаптивной карточке можно добавить в следующее:

  • Действия. В действиях основные кнопки отображаются на адаптивной карточке, а дополнительные кнопки находятся в меню переполнения.

  • ActionSet: ActionSet — это сочетание нескольких действий в адаптивной карточке. Каждый набор действий может иметь меню переполнения.

Примечание.

Адаптивная карточка поддерживает до шести основных действий для просмотра на карта. Все дополнительные основные действия отображаются в меню переполнения.

Чтобы включить меню переполнения mode , настройте свойство со значением primary или secondary в схеме адаптивной карточки. В следующей таблице описано mode свойство :

СвойствоТипОбязательныйОписание
modeПеречисление (основной, вторичный)НетЯвляется ли действие основным или дополнительным действием. Дополнительные действия будут сворачиваться в меню переполнения.

Ниже приведен пример mode свойства в типе actions и элементе ActionSet :

Действия

В следующем примере есть два основных и одно дополнительное действие. Дополнительное действие создает меню переполнения.

{
   "type": "AdaptiveCard",
   "actions": [
        {
            "type": "Action.Submit",
            "title": "Set due date"
        },
        {
            "type": "Action.OpenUrl",
            "title": "View",
            "url": "https://adaptivecards.io"
        },
        {
            "type": "Action.Submit",
            "title": "Delete",
            "mode": "secondary"
        }
    ]
}

Примечание.

  • Меню переполнения работает по-разному на боте, отправленном карта, и расширение сообщения карта для корневого уровня actions в адаптивной карточке. Меню переполнения в боте, отправленном карта, отображается в виде всплывающего контекстного меню, а в расширении сообщения карта оно отображается в правом верхнем углу под значком Дополнительные параметры (…). Поведение не применимо к в адаптивной карточке ActionSet .

На следующем рисунке показан пример меню переполнения в карта, отправленном ботом, и расширение сообщения карта:

Набор действий

В следующем примере все действия помечаются как вторичные, поэтому на карта появляется одно меню переполнения.

{
    "type": "ActionSet",
     "actions": [
          {
           
            "type": "Action.Submit",
            "title": "view",
            "mode": "Secondary" 
       {
       },
            "type": "Action.submit",
            "title": "Delete",
            "mode": "secondary"
       },
       {
             "type": "Action.submit",
            "title": "Delete",
            "mode": "secondary"
       }
     ]
}

Ниже приведен пример меню переполнения в классических и мобильных приложениях Teams.

  • Компьютер
  • Мобильные устройства

Когда пользователь выбирает меню переполнения на рабочем столе, кнопки, заданные как вторичные, отображаются в адаптивной карточке.

Форматирование карточек с помощью HTML

Следующие типы карточек поддерживают форматирование HTML в Teams:

  • Карточки соединителей для Группы Microsoft 365. В карта соединителя для Группы Microsoft 365 поддерживается ограниченное форматирование Markdown и HTML.
  • Карточки эскизов и главного имиджевого баннера: HTML-теги поддерживаются для простых карточек, таких как карточки эскизов и главного имиджевого баннера.

Форматирование различается в классической и мобильной версиях Teams для карт соединителей для Группы Microsoft 365 и простых карточек. В этом разделе можно ознакомиться с примером форматирования HTML для карточек соединителей и простых карточек.

  • Формат HTML для карточек соединителей для Группы Microsoft 365
  • Форматирование HTML для карточек эскизов и главного имиджевого баннера

Карточки соединителей поддерживают ограниченное форматирование Markdown и HTML.

StyleПримерHTML
Полужирныйtext<strong>text</strong>
Курсивtext<em>text</em>
Заголовок (уровни 1–3)Text<h4>Text</h4>
Зачеркнутыйtext<strike>text</strike>
Неупорядоченный список
  • текст
  • текст
<ul><li>text</li><li>text</li></ul>
Упорядоченный список
  1. текст
  2. текст
<ol><li>text</li><li>text</li></ol>
Предварительно отформатированный текстtext<pre>text</pre>
Цитата
текст
<blockquote>text</blockquote>
HyperlinkBing<a href="https://www. bing.com/">Bing</a>
Ссылка на изображение<img src="https://aka.ms/Fo983c" alt="Duck on a rock"></img>

В карточках соединителей новые строки отображаются в HTML с помощью тега <p>.

Различия, связанные с карточками соединителей, в классической и мобильной версиях

В классической версии форматирование HTML для карточек соединителей отображается следующим образом:

В iOS форматирование HTML отображается следующим образом:

С карточками соединителей, использующими HTML для iOS, возникают следующие проблемы:

  • Встроенные изображения не отображаются в iOS с помощью Markdown или HTML в карточках соединителя.
  • Предварительно отформатированный текст отображается, но не имеет серого фона.

В Android форматирование HTML отображается следующим образом:

Пример форматирования для карточек соединителей HTML

В следующем коде показан пример форматирования для карточек соединителей HTML:

{
  "contentType": "application/vnd. microsoft.teams.card.o365connector",
  "content": {
    "@type": "MessageCard",
    "@context": "https://schema.org/extensions",
    "summary": "Summary",
    "title": "Connector Card HTML formatting",
    "sections": [
        {
            "text": "This is some <strong>bold</strong> text"
        },
        {
            "text": "This is some <em>italic</em> text"
        },
        {
            "text": "This is some <strike>strikethrough</strike> text"
        },
        {
            "text": "<h2>Header 1</h2>\r<h3>Header 2</h3>\r <h4>Header 3</h4>"
        },
        {
            "text": "bullet list <ul><li>text</li><li>text</li></ul>"
        },
        {
            "text": "ordered list <ol><li>text</li><li>text</li></ol>"
        },
        {
            "text": "hyperlink <a href=\"https://www.bing.com/\">Bing</a>"
        },
        {
            "text": "embedded image <img src=\"https://aka. ms/Fo983c\" alt=\"Duck on a rock\"></img>"
        },
        {
            "text": "preformatted text <pre>text</pre>"
        },
        {
            "text": "Paragraphs <p>Line a</p><p>Line b</p>"
        },
        {
            "text": "<blockquote>Blockquote text</blockquote>"
        }
     ]
  }
}

Примеры кода

S.No.Описание.NETNode.jsМанифест
1В этом примере приложения показаны различные карта форматирования, поддерживаемые в Teams.ПросмотрПросмотрПросмотр

См. также

  • Карточки и модули задач
  • Формат сообщений бота
  • Использование модулей задач из ботов
  • Обозреватель схемы для адаптивных карточек
  • Создание соединителей для Группы Microsoft 365
  • Создание входящих веб-перехватчиков

html — Добавить текст при наведении без javascript, как мы наводим на репутацию пользователя

спросил

Изменено 2 года, 3 месяца назад

Просмотрено 433 тысячи раз

В stackoverflow, когда мы наводим курсор на репутацию пользователя, мы видим текст. Я видел это во многих местах, и исходный код говорит мне, что это можно сделать без js. А я пробовал и получил только это-

 наведите курсор на меня
  • html
  • hover

Используйте атрибут title , например:

 
hover me

или:

 наведите меня
9

Атрибут title также хорошо работает с другими элементами html, например со ссылкой…

  ссылка для скачивания

Часто в этой ситуации я использую аббревиатуру html-тега.

Текст

https://www.w3schools.com/tags/tag_abbr.asp

1

Вы ищете всплывающую подсказку

Для базовой подсказки вам нужно:

Для более красивой версии javascript вы можете посмотреть:

http://www. designer-daily.com/jquery-prototype-mootool-tooltips-12632

Приведенная выше ссылка дает вам 12 вариантов всплывающих подсказок.

Это также можно сделать в CSS для большей настраиваемости:

 .hoverable {
  положение: родственник;
}
.hoverable> .hoverable__tooltip {
  дисплей: нет;
}
.hoverable:hover>.hoverable__tooltip {
  дисплей: встроенный;
  положение: абсолютное;
  верх: 1эм;
  слева: 1эм;
  фон: #888;
  граница: 1px сплошной черный;
} 
 <дел>
  Основной текст
  Текст при наведении

(Очевидно, стиль можно улучшить)

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

html — отображать текст при наведении

спросил

Изменено 2 года, 4 месяца назад

Просмотрено 10 тысяч раз

При наведении курсора на html я хочу отобразить текст. Сейчас у меня так:

 эхо "";

Проблема в том, что он выглядит очень маленьким и без дизайна. Как я мог бы сделать его больше и с небольшим взглядом?

Я хотел бы сделать что-то подобное в html. Поле, которое появляется справа

  • html
  • css
1

Дополнительную информацию см. здесь

 корпус {
  выравнивание текста: по центру;
}
.подсказка {
  положение: родственник;
  отображение: встроенный блок;
  курсор: по умолчанию;
}
. tooltip .tooltiptext {
  видимость: скрытая;
  набивка: 0,25 см 0,5 см;
  цвет фона: черный;
  цвет: #fff;
  выравнивание текста: по центру;
  радиус границы: 0,25 em;
  пробел: nowrap;
  
  /* Размещение всплывающей подсказки */
  положение: абсолютное;
  z-индекс: 1;
  верх: 100%;
  слева: 100%;
  свойство перехода: видимость;
  задержка перехода: 0 с;
}
.tooltip: наведение .tooltiptext {
  видимость: видимая;
  задержка перехода: 0,3 с;
} 
 
Наведите на меня курсор
  Текст всплывающей подсказки

Вот как вы можете это сделать. Сначала создайте основной элемент, я использую текст, а рядом с ним добавьте текст, который вы хотите показывать при наведении. Стилизуйте все на свой вкус. Убедитесь, что для отображения дополнительного текста установлено значение none . По сути, мы скроем его и покажем, только когда кто-то наведет курсор на основной элемент.

Теперь в CSS я добавил .Main-Text:hover + .Extra-Text CSS Selector для достижения того, что мы пытаемся сделать. В основном это означает, что когда кто-то наводит курсор на элемент с классом Main-Text , что-то происходит с элементом с классом Extra-Text .

Подробнее об этом можно прочитать здесь.

 * {
    поле: 0px;
    отступ: 0px;
}
тело {
    дисплей: гибкий;
    flex-направление: столбец;
    выравнивание элементов: по центру;
    поле сверху: 20px;
    мин-высота: 100вх;
}
.Main-Text: hover + .Extra-Text {
    дисплей: блок;
}
.Дополнительный текст {
    цвет фона: #FFFFFF;
    поле сверху: 10px;
    ширина: 200 пикселей;
    граница: 2px сплошная #000000;
    отступ: 10 пикселей;
    размер шрифта: 16px;
    дисплей: нет;
} 
 
    <дел>
    

        Наведите меня, чтобы узнать обо мне больше.
    

    <дел>
        

        Это дополнительная информация, которая будет отображаться при наведении на текст.

Я так не думаю, если это то, что вы ищете, но это стоит упомянуть.

No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *