<MyRusakov.ru />

Создание Интернет-магазина на PHP и MySQL

Создание Интернет-магазина на PHP и MySQL

Видеокурс "Создание Интернет-магазина на PHP и MySQL" - это уникальный курс по созданию Интернет-магазина с нуля. Особенностью данного курса является то, что создание идёт с самого начала, то есть от идеи. Далее создаётся дизайн всех необходимых страниц, после делается их вёрстка. Затем создаётся движок на PHP и MySQL, после делается Admin-панель и, наконец, готовый сайт размещается в Интернете.

Адрес созданного в этом курсе сайта: http://storedvd.ru

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

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

Подписавшись по 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. Можно ли как-то вообще без рамок обойтись?

Ответить

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