У цьому підручнику Я покажу вам, як створити CSS Tooltip без використання JavaScript цьому дуже простим і ефективним способом. Сподіваюся, вам сподобається цей пост.

Ось скріншот

Крок: 1 Основні CSS кодекс

  ; padding : 0 ; } * (Різниці: 0; оббивка: 0;) 
  % normal  Arial, Helvetica, sans-serif ; } (тіло шрифта: 100% нормального Arial, Helvetica, без-Serif;) 
  : # 666 ; font-size : 12px ; line-height : 150 %; margin : 0 0 10px 0 ; } P (COLOR: # 666; розмір шрифту: 12px; лінійний ріст: 150%; околиці: 0 0 10px 0;) 
   margin : 0 auto ; width : 550px ; } # (Різниці сторінку: 0 авто, ширина: 550px;) 

Ось чарівний код

 : #F00 ; font-size : 12px ; } a :hover { background : #fff ; /*background color for IE*/ text-decoration :none ; } a .tooltip span { display :none ;         padding : 5px 5px ;         margin-left : 3px ;         margin-top : 10px ;       width : 170px ;         font-size : 12px ;         line-height : 150 %; } a .tooltip :hover span { display :inline ;         position :absolute ; background : #F20F27 ;         border : 1px solid #C30018 ; color : #fff ; } A (COLOR: # F00; розмір шрифту: 12px;) A: наведіть (фону: # FFF; / * Колір фону для IE * / текст-оздоблення: немає;) один. Tooltip Span (дисплея: немає; оббивка: 5px 5px; маржа наліво: 3px; різниці-топ: 10px; ширина: 170px; розмір шрифту: 12px; лінійний ріст: 150%;) один. підказка: наведіть Span (дисплея: вбудований; позиції: абсолютний; фону: # F20F27; кордону: 1px твердих # C30018; колір: # FFF;) 

Крок: 2 Основні HTML Структура

 > <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div ID = "page"> <p> Lorem Ipsum Dolor Amet сидіти, consectetur adipiscing Еліт.  Ut viverra dui NEC risus.  В ЄС neque один tortor lacinia rhoncus.  У interdum Lorem Ipsum Dolor Amet сидіти, consectetur adipiscing Еліт.  Ut viverra dui NEC risus. </ SPAN> </ A> Lorem Ipsum Dolor Amet сидіти, consectetur adipiscing Еліт.  Suspendisse potenti.Lorem Ipsum Dolor Amet сидіти, </ P> <p> Lorem Ipsum Dolor Amet сидіти, consectetur adipiscing Еліт.  Ut viverra dui NEC risus.  В ЄС neque один tortor lacinia rhoncus.  class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. У interdum <a HREF = "#" клас = "tooltip"> placerat <span> Lorem Ipsum Dolor Amet сидіти, consectetur adipiscing Еліт.  Ut viverra dui NEC risus. </ SPAN> </ A> Lorem Ipsum Dolor Amet сидіти, consectetur adipiscing Еліт.  Suspendisse potenti.Lorem Ipsum Dolor Amet сидіти, </ P> <p> Lorem Ipsum Dolor Amet сидіти, consectetur adipiscing Еліт.  Ut viverra dui NEC risus.  В ЄС neque один tortor lacinia rhoncus.  У interdum Lorem Ipsum Dolor Amet сидіти, consectetur adipiscing Еліт.  Ut viverra dui NEC risus. </ SPAN> </ A> Lorem Ipsum Dolor Amet сидіти, consectetur adipiscing Еліт.  Suspendisse potenti.Lorem Ipsum Dolor Amet сидіти, </ P> </ DIV> 

Нарешті, ми створили три колонки CSS макета.
Завантажити | Переглянути демо

Прохання поділитися своїми коментарями з нами, ми будемо раді почути від Вас ...

Filed в: CSS, Уроки по адміністратора