Строка при Hover - Сообщество uCoz

Страница 1 из 1 1
Модератор форума: dotbot

Строка при Hover (Как сделать?)

Строка при Hover

Mr_News

Сообщений: 90

Репутация: 52

Сообщение # 1 | 18:46:48 02 Июл 2012

Всем доброго времени суток.
Можно ли, как-нибудь сделать, чтобы при hover'е появлялась такая вот панелька

Код такой.

Code

Чтобы при наведении она появлялась.

Ca$his

Сообщений: 21

Репутация: -7

Сообщение # 2 | 22:17:07 04 Июл 2012

Mr_News,

Code

<!DOCTYPE html>
<html>
   <head>
    <meta charset="utf-8">
    <title>Всплывающая подсказка на CSS</title>
    <style>
     .photo {
      display: inline-block; /* Строчно-блочный элемент */
      position: relative; /* Относительное позиционирование */
     }
     .photo:hover::after {
      content: attr(data-title); /* Выводим текст */
      position: absolute; /* Абсолютное позиционирование */
      left: 0; right: 0; bottom: 5px; /* Положение подсказки */
      z-index: 1; /* Отображаем подсказку поверх других элементов */
      background: rgba(0,42,167,0.6); /* Полупрозрачный цвет фона */
      color: #fff; /* Цвет текста */
      text-align: center; /* Выравнивание текста по центру */
      font-family: Arial, sans-serif; /* Гарнитура шрифта */
      font-size: 11px; /* Размер текста подсказки */
      padding: 5px 10px; /* Поля */
      border: 1px solid #333; /* Параметры рамки */
     }
    </style>
   </head>
   <body>
     <div class="photo" data-title="Софийский собор"><img src="images/thumb1.jpg" alt=""></div>
     <div class="photo" data-title="Польский костел"><img src="images/thumb2.jpg" alt=""></div>
   </body>
</html>

С уважением, © Ca$his

Прикрепления: 2879472.png (18.4 Kb)

Важно не то, что с нами происходит,
а то, как мы к этому относимся

Сообщение отредактировал Ca$his - Среда, 04 Июл 2012, 22:48:00

brizing

Разработчик

Сообщений: 2556

Репутация: 1091

Сообщение # 3 | 22:55:33 04 Июл 2012

можно проще

<a id="photoInput" href="Куда_ведет_кнопка"><img src="до_наведения" onmouseover="this.src='во_время_наведения';" onmouseout="this.src='после_наведения';" border="0" title="фотоКнопка"></a>

Читайте книги role.su - Rolesu Authors Workshop.

Строка при Hover (Как сделать?)

Страница 1 из 1
1

Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!