/ Сайтостроение / Дизайн / Появляющееся окно-подсказка

Появляющееся окно-подсказка

09.07.2015

648

Сделаем появляющееся окно-подсказка. Данный функционал реализован на сайте КИНОПОИСК (в классическом варианте).

<!-- Появляющийся при наведении блок -->
<script>
        $(document).ready(function(){
        $('.hover').each(function(){
        var hover=$(this);
        hover.hide();
        $("#"+hover.attr('rel')).hover(function(){
        hover.toggle(200);
        });
        });
        });
</script>

В сайт

<div id="help">Сюда надо навести</div>
<div rel="help" class="hover help-block">Текст появится</div>
ПРИМЕР: Сюда надо навести
Текст подсказки появится ЗДЕСЬ

CSS

/* Появляющиеся подсказки */

.help-block {
position: fixed;
z-index: 999;
display: block;
left: 5%;
bottom: 5%;
width: 15%;
padding: 1% 2%;
background-color: rgb(255, 227, 118);
color: #000;  
}

@media (max-width:1024px) { .help-block {width: 50%; padding: 2% 4%;} }

Поделится информацией с друзьями

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Появляющееся окно-подсказка
Подключаем КЛАДР
Рекомендации для васПодключаем КЛАДРOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.