<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

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

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Создание всплывающей подсказки

Создание всплывающей подсказки

В этой статье хочется рассказать о том, как создавать всплывающие подсказки с использованием CSS. Тема очень популярная, поэтому я решил её осветить.

Давайте сразу приведу код, позволяющий реализовать всплывающие подсказки:

<html>
<head>
<title>Всплывающие подсказки</title>
<style>
a.help {
  text-decoration: none;
  color: #000000;
  border-bottom: dashed 1px #000;
}
a.help span {
  display: none;
}
a.help:hover {
  position: relative;
}
a.help:hover span {
  position: absolute;
  display: block;
  left: 10px;
  top: 25px;
  border: solid 1px #000000;
  background: #FFFFFF;
  color: #000000;
  white-space: pre;
  padding: 2px;
}
</style>
</head>
<body>
Одним из важнейших параметров
<a href="/" class="help">
  АЦП
  <span> Аналого-цифровой преобразователь</span>
</a>
является его разрядность.
</body>
</html>

Как видите, всё очень просто. Изначально элемент <span> внутри тега <a> с классом "help" невидимый (display: none;). Но как только мы наводим мышку на тег <a> (a.help:hover), как сразу для элемента <span> срабатывают стили, и он появляется. Все остальные свойства задают расположение и внешний вид. Мой Вам совет: скопируйте код и вставьте в обычный HTML-документ, и посмотрите на результат. Также рекомендую побаловаться со значениями свойств.

Вот такая небольшая статья.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (14):

Google Google 18.05.2012 14:49:27

Михаил, вот у меня есть код стиля: a.help { text-decoration: none; color: #000000; border-bottom: dashed 1px #000; } a.help title { display: none; } a.help:hover { position: relative; } a.help:hover title { position: absolute; display: block; left: 10px; top: 25px; border: solid 1px #000000; background: #3D3D3D; color: #FFFFFF; white-space: pre; padding: 2px; font-family: "verdana", "arial", "helvetica"; font-size: 8pt; line-height: 10px; margin: 1px; padding: 8px; position: absolute; width: auto; } как мне сделать штоби он применялся ко всем атрибутам title??

Ответить

Admin Admin 18.05.2012 15:51:31

Использовать селектор параметров: http://myrusakov.ru/selektory-css.html

Ответить

jarkrin jarkrin 14.04.2013 18:26:46

Михаил, а как всплывающую подсказку сделать для картинки. Также должен быть изменён курсор (как изменить знаю).

Ответить

Admin Admin 14.04.2013 21:21:59

Вместо ссылки вставить очевидно изображение. А для изменения курсора есть свойство cursor в CSS.

Ответить

LeonG LeonG 09.09.2013 20:47:10

Михаил, а вот в коде a.help:hover { position: relative; } почему именно при hover? Я обычно делал без него и всё вполне получалось. В чём различия?

Ответить

LeonG LeonG 09.09.2013 20:59:28

хотя, я предпологаю, что это сделано для того, чтобы данный триггер срабатывал только при наведении (кеп), я имею ввиду, что если мы что-то будем ещё добавлять, то нам не мешало это позицианирование каким-то образом, а "включалось" только тогда, когда надо.

Ответить

Admin Admin 10.09.2013 11:11:17

Для данного примера я сделал именно hover. В принципе, можно и другим способом его активировать.

Ответить

m773ma@gmail.com m773ma@gmail.com 24.12.2013 21:49:37

Михаил, у меня подсказка всплывает, когда навожу мышкой, но не исчезает, когда убираю курсор. Если position задать как fixed, или static (или любое другое), то при наведении - подсказка появляется (хоть и не там, где надо), при убирании - исчезает. И только при position: absolute подсказка не исчезает. Так и должно быть? Дополнение: при выделении курсором любого символа или слова из фразы "является его разрядность." подсказка-таки исчезает. При выделении любого другого элемента на странице ничего не происходит.

Ответить

tanysha86 tanysha86 27.02.2014 11:04:50

Добрый день, Михаил! Подскажите пожалуйста, при использовании position:relative для блоков, у меня остается прокрутка, т.е. браузер считает (или оставляет это место) бля блока, который в данный момент находится совершенно в другом месте, подскажите, как это исправить?

Ответить

tikkiwiki tikkiwiki 04.03.2014 14:11:03

Верстайте адаптивной версткой, так же прибегайте к использованию "резины".

Ответить

Web-дизайнер. Web-дизайнер. 17.10.2014 03:17:38

Спасибо за пример! А можно в него добавить такое свойство, чтобы подсказка следовала за движением мышки?

Ответить

Maks4ever Maks4ever 30.12.2014 09:32:53

a.help { text-decoration: none;/*убираем подчёркивание у ссылки*/ color: #000000; border-bottom: dashed 1px #000; } a.help span { display: none;/*просто скрываем вспл подсказку*/ } a.help:hover { position: relative; } a.help:hover span { position: absolute;/*у родителя relative значит top left отсчит от родителя, влияет на положение подсказки*/ display: block;/*нужно чтобы span вёл себя как блок*/ left: 10px; top: 25px; border: solid 1px #000000;/*свойства для задания подсказки*/ background: #FFFFFF; color: #000000; white-space: pre;/* нужно чтобы текст подсказки показывался одной строкой без переносов*/ padding: 2px; }

Ответить

Maks4ever Maks4ever 30.12.2014 09:33:41

тем кто не въехал в код стилей ;)

Ответить

Web-дизайнер. Web-дизайнер. 15.04.2015 18:36:25

Здравствуйте Михаил! Появился такой вопрос к Вашему примеру всплывающей подсказки: - Как убрать рамку вокруг вставленной в код картинки в виде подсказки, вернее сказать - снизу у картинки. Рамка вокруг картинки убирается с трёх сторон - слева, сверху, справа - если в последнем блоке поставить padding: 0px;, а вот нижняя часть не убирается. Пробовал менять параметры у строки border: solid 1px #000000;, но ничего не получилось. Пробовал совсем удалять все параметры border. Картинку в виде подсказки вырезаю программой HyperSnap. Можно ли как-то вообще без рамок обойтись?

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.