Форум

Shuryga · #1 (**permalink**) 14.12.2016, 15:11

Всем доброго времени суток. Ребят нужна помощь, дело вот в чем.

Есть два блока, в одном из них есть еще блоки.

<div class='big-one'>
    <div class='smaal-block'></div>
    <div class='smaal-block'></div>
    <div class='smaal-block'></div>
</div>
<div class='big-two'>

</div>

При наведении на блок "smaal-block" заполняется второй большой блок (например Привет прекрасный мир!). Наводишь на другой маленький блок второй большой блок наполняется по-другому (например Привет мир!). Есть проблема что если быстро переводишь мышку на второй блок, иногда цепляешь краешек другого маленького блока ("small-block"). и на втором уже отображается не то что нужно.

Как можно сделать так чтоб если не сильно задеваешь переводя на второй блок событие не срабатывает.

Заранее спасибо.

ksa · #2 (**permalink**) 14.12.2016, 15:14

Сообщение от Shuryga

сделать так чтоб если не сильно задеваешь

Как вариант, анализировать координаты мыши, дабы понять "сильно" ты задел или "не сильно"...

ksa · #3 (**permalink**) 14.12.2016, 15:18

Либо поместить ДИВы

Сообщение от Shuryga

<div class='smaal-block'></div>

В еще какой-либо контейнер с

padding: <указать_нужный_зазор>;

Shuryga · #4 (**permalink**) 14.12.2016, 15:25

Понял тебя спасибо. Но есть момент. Если переводишь по маленьким блокам "smaal-block" то нужно чтоб работал по всему телу блока. А если переводишь на воторой блок то тогда, не по всей дабы избежать данного бага. Возможно ли так?

Dilettante_Pro · #5 (**permalink**) 14.12.2016, 16:26

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>

ksa · #6 (**permalink**) 14.12.2016, 16:37

Сообщение от Shuryga

нужно чтоб работал по всему телу блока. А если переводишь на воторой блок то тогда, не по всей дабы избежать данного бага. Возможно ли так?

Dilettante_Pro уже предложил один из вариантов...

Shuryga · #7 (**permalink**) 15.12.2016, 15:54

Ребят всем большое спасибо буду тестить.

Форум

Справочник

Discord чат

Курсы javascript