Перекрытие блоков div

@zasadadada · Регистрация: 03.05.2013

Студворк — интернет-сервис помощи студентам

Скажите пожалуйста, есть у меня 10 блоков div в линию. Установленные через

CSS
1
    display: inline-block;

Каждый блок имеет свой идентификатор и общий класс, далее меняю на JS размер блока при наведении мышки. И вот тут проблемы, первый раз всё срабатывает хорошо, но как только каждый блок увеличится по разу и более получается следующее. Каждый следующий блок выше предыдущего. С лева на право. Хотя через JS я устанавливаю z-index. Вообще не могу разобраться. Может кто знает в чём дело?

@mrtoxas · 21.01.2017, 12:04

Приведите код, который даст возможность воспроизвести проблему.

@zasadadada · 21.01.2017, 12:55 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
                    <div id="header_icons">
                        <div class="header_icons_block" id="header_icons_block1">
                        </div>
                        <div class="header_icons_block" id="header_icons_block2">
                        </div>
                        <div class="header_icons_block" id="header_icons_block3">
                        </div>
                        <div class="header_icons_block" id="header_icons_block4">
                        </div>
                        <div class="header_icons_block" id="header_icons_block5">
                        </div>
                        <div class="header_icons_block" id="header_icons_block6">
                        </div>
                        <div class="header_icons_block" id="header_icons_block7">
                        </div>
                    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#header_icons {
    height: auto; 
    width:  100%; 
    margin: 0px 0px;
    text-align: center;
}
 
.header_icons_block {
    vertical-align:top;
    width: 60px;
    height: 60px;
    display: inline-block;
    margin: 0 0px;
    z-index: 2;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    function header_icons_hover(pin_in) {
        dynamics.animate(pin_in, { 
            scale: 4, 
            "z-index": 3,
        })  
    };
    
    function header_icons_mouseout(pin_in) {
        dynamics.animate(pin_in, { 
            scale: 1, 
            "z-index": 2,
        })  
    };
 
    $( "#header_icons_block1" ).hover(function() {
        header_icons_hover(document.querySelector('#header_icons_block1'))
    });
    $( "#header_icons_block1" ).mouseout(function() {
        header_icons_mouseout(document.querySelector('#header_icons_block1'))
    });
 
        ...

Добавлено через 36 минут
забыл цвета разные кубикам

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#header_icons_block1 {
    background-color: rgba(128,0,0, 1);
}
 
#header_icons_block2 {
    background-color: rgba(128,128,0, 1);
}
#header_icons_block3 {
    background-color: rgba(128,128,128, 1);
}
#header_icons_block4 {
    background-color: rgba(0,128,128, 1);
}
#header_icons_block5 {
    background-color: rgba(0,0,128, 1);
}
#header_icons_block6 {
    background-color: rgba(256,0,0, 1);
}
#header_icons_block7 {
    background-color: rgba(256,256,0, 1);
}

Вот результат, тут же и проблема видна

@zasadadada · 22.01.2017, 09:03 **[ТС]**

Проблема всё ещё актуальна.

@thedude · 22.01.2017, 09:27

Как я понял, вам просто нужно увеличивать масштаб при наведении. Изменяйте значение scale и не трогайте z-index. Не силен в javascript, но вот реализация на css.
https://jsfiddle.net/9rc42t19/

CSS
1
#header_icons_block7:hover,#header_icons_block6:hover, #header_icons_block5:hover, #header_icons_block4:hover, #header_icons_block3:hover,#header_icons_block2:hover,#header_icons_block1:hover {transform:scale(3);}

@zasadadada · 22.01.2017, 13:53 **[ТС]**

Спасибо thedude работает, но ни чего не понимаю просто в css файле scale(3) работает, а в JS тоже самое идёт перекрывание блоков.

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	21.01.2017, 12:04
	Приведите код, который даст возможность воспроизвести проблему. 0

@zasadadada 81 / 40 / 22 Регистрация: 03.05.2013 Сообщений: 722
	22.01.2017, 09:03 [ТС]
	Проблема всё ещё актуальна. 0

@zasadadada 81 / 40 / 22 Регистрация: 03.05.2013 Сообщений: 722
	22.01.2017, 13:53 [ТС]
	Спасибо thedude работает, но ни чего не понимаю просто в css файле scale(3) работает, а в JS тоже самое идёт перекрывание блоков. 0