Показать сообщение отдельно
  #5 (permalink)  
Старый 14.12.2016, 16:26
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Shuryga,
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <style>
        .small-block
        {
            position: relative;
            width: 30px;
            height: 30px;
            background-color: Green;
            border: 1px solid black;
        }
        .small-block:hover
        {
            background-color: lightgreen;
        }
    </style>
    <script>

        $(function () {
            var mess = ['Первый', 'Второй', 'Третий'];
            var timeout;
            $('.small-block').each(function (indx, element) {
                $(element).on('mouseenter', function () {
                    clearTimeout(timeout);
                    timeout = setTimeout(function () {
                        $('.big-two').html(mess[indx]);
                    }, 1000);
                })
            })
        })
    </script>
</head>
<body>
    <div class='big-one'>
        <div class='small-block'></div>
        <div class='small-block'></div>
        <div class='small-block'></div>
    </div>
    <div class='big-two'>
    </div>
</body>
</html>
Ответить с цитированием