Дополнительная информация при наведении

@CyberIslam · Регистрация: 21.02.2013

Студворк — интернет-сервис помощи студентам

ВСем привет. Я хочу в wordpress сделать так, чтобы при наведении на фото специалиста появлялась дополнительная информация о нем как здесь. Дадже кнопка записи на прием появляется. Помогите сделать так же) Желательно встроенными средствами Wordpress, если это невозможно - плагинами. И лишь позже всего кодами)) Благодарю

@Lazor · 23.08.2023, 11:29

Сообщение от CyberIslam

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

Не нужно так делать. Кнопки и вся важная информация должна быть доступна сразу, без доп. телодвижений.

TuxFighter · 23.08.2023, 11:37

Сообщение от CyberIslam

Желательно встроенными средствами Wordpress, если это невозможно - плагинами.

плагины - и есть встроенные средства Wordpress.
Именно они и отвечают за весь функционал сайта.

@CyberIslam · 23.08.2023, 16:29 **[ТС]**

Lazor, Вопрос ведь был не в том, делать или не делать, а в том, как делать))

Добавлено через 1 минуту

Сообщение от TuxFighter

плагины - и есть встроенные средства Wordpress

Это не встроенные средства, а дискретные. Есть плагины, помимо нужного функционала тормозящие работу сайта в целом. У меня такие вещи вытворял аж WP Super Cashe

@Lazor · 23.08.2023, 16:36

Сообщение от CyberIslam

Вопрос ведь был не в том, делать или не делать, а в том, как делать))

Тут такое дело - когда человек спрашивает "с какой ноги нужно прыгать с крыши" я пытаюсь сохранить ему жизнь. Даже если это ответ не на тот вопрос.

TuxFighter · 24.08.2023, 05:38

Сообщение от CyberIslam

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

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

@CyberIslam · 24.08.2023, 08:17 **[ТС]**

Сообщение от Lazor

я пытаюсь сохранить ему жизнь

Ценю Вашу заботу. В данном случае человек с парашютом и прыгает на батут

@Lazor · 24.08.2023, 09:56

Сообщение от CyberIslam

В данном случае человек с парашютом и прыгает на батут

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

Ида. плагинов таких я не знаю. Хотя бы потому, что такое зло я не внедряю.
Сделать же кодом можно. И это легко нагуглить.

@weFF · 24.08.2023, 12:06

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.card {
  width: 300px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
}
 
.card-content {
  padding: 20px;
}
 
.card-info {
  display: none;
  padding: 10px;
  background-color: #f0f0f0;
  border-top: 1px solid #ccc;
}
 
.card:hover .card-info {
  display: block;
}

HTML5
1
2
3
4
5
6
7
8
9
  <div class="card">
    <div class="card-content">
      <h2>имя</h2>
      <p>Информация </p>
    </div>
    <div class="card-info">
      <p>Информация 2</p>
    </div>
  </div>

Добавлено через 13 минут

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.card-container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 20px;
  background-color: lightblue;
}
 
.card {
  width: 300px;
  margin: 10px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
}
 
.card-content {
  padding: 20px;
}
 
.card-info {
  display: none;
  padding: 10px;
  background-color: #f0f0f0;
  border-top: 1px solid #ccc;
}
 
.card:hover .card-info {
  display: block;
}
 
@media (max-width: 600px) {
  .card-container {
    padding: 10px;
  }
 
  .card {
    width: 100%;
    margin: 10px 0;
  }
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
  <div class="card-container">
    <div class="card">
      <div class="card-content">
        <h2>CyberForum 1</h2>
        <p>Информация 1.</p>
      </div>
      <div class="card-info">
        <p>Доп. Информация 1.</p>
      </div>
    </div>
    <div class="card">
      <div class="card-content">
        <h2>CyberForum 2</h2>
        <p>Информация 2.</p>
      </div>
      <div class="card-info">
        <p>Доп. Информация 2.</p>
      </div>
    </div>
    <div class="card">
      <div class="card-content">
        <h2>CyberForum 3</h2>
        <p>Информация 3.</p>
      </div>
      <div class="card-info">
        <p>Доп. Информация 3.</p>
      </div>
    </div>
    <div class="card">
      <div class="card-content">
        <h2>CyberForum 4</h2>
        <p>Информация 4.</p>
      </div>
      <div class="card-info">
        <p>Доп. Информация 4.</p>
      </div>
    </div>
    <div class="card">
      <div class="card-content">
        <h2>CyberForum 5</h2>
        <p>Информация 5.</p>
      </div>
      <div class="card-info">
        <p>Доп. Информация 5.</p>
      </div>
    </div>
  </div>

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@CyberIslam 21 / 14 / 5 Регистрация: 21.02.2013 Сообщений: 713

	Дополнительная информация при наведении 23.08.2023, 11:19. Показов 857. Ответов 8 Метки нет (Все метки) ВСем привет. Я хочу в wordpress сделать так, чтобы при наведении на фото специалиста появлялась дополнительная информация о нем как здесь. Дадже кнопка записи на прием появляется. Помогите сделать так же) Желательно встроенными средствами Wordpress, если это невозможно - плагинами. И лишь позже всего кодами)) Благодарю 0

Дополнительная информация при наведении

Решение