Как убрать мельтешение дивов при ховере?

@BoxOfWonders · Регистрация: 20.12.2019

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

Всем привет.
В общем, нужно чтобы у двух дивов был ховер с бекграундом. При наведение на первый див TakeTheTest, второй див LangSwitcher смещается. При наведении на сам LangSwitcher, он также смещается относительно своего местоположения.
Каким образом это исправить? Спасибо.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.TakeTheTest {
    float: left;
    margin: 25px 15px 18px 25px;
    padding: 5px 20px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
}
.TakeTheTest:hover {
    cursor: pointer;
    background-color: #4169E1;
    border: 1px solid #4169E1;
    border-radius: 15px;
}
.LangSwitcher {
    float: left;
    margin: 25px 15px 18px 25px;
    padding: 5px 20px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
}
.LangSwitcher:hover {
    cursor: pointer;
    border: 1px solid black;
    border-radius: 15px;
}

@HAIRY · 20.12.2019, 10:26

Скинь html

Это из-за рамки, вот так норм

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.LangSwitcher {
box-sizing: border-box;
float: left;
margin: 25px 15px 18px 25px;
padding: 5px 20px;
font-family: 'Oswald', sans-serif;
font-weight: 600;
border: 1px solid rgba(255, 255, 255, .1);
}
.LangSwitcher:hover {
cursor: pointer;
border: 1px solid black;
border-radius: 15px;
}

@BoxOfWonders · 20.12.2019, 10:43 **[ТС]**

Вот HTML. Попробовал с бордер-боксом -- не то.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
                <header>
            <div id="subheader">
                <div class="logo">
                    <img src="http://pluspng.com/img-png/burger-king-logo-png--500.png" width="50">
                </div>
                <div class="Home">Home</div>
                <div class="FAQ">FAQ</div>
                <div class="Blog">Blog</div>
                <div class="ContactUs">Contact Us</div>
                <div class="AboutUs">About Us</div>
                <div class="TakeTheTest">Take the Test</div>
                <div class="LangSwitcher">EN</div>
            </div>          
        </header>

@HAIRY · 20.12.2019, 10:58

border-box не причем, невидимая рамка

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.LangSwitcher {
float: left;
margin: 25px 15px 18px 25px;
padding: 5px 20px;
font-family: 'Oswald', sans-serif;
font-weight: 600;
border: 1px solid rgba(255, 255, 255, .1);
}
.LangSwitcher:hover {
cursor: pointer;
border: 1px solid black;
border-radius: 15px;
}[/HTML]
[HTML]border: 1px solid rgba(255, 255, 255, .1);

@BoxOfWonders · 20.12.2019, 15:19 **[ТС]**

Спасибо, с TakeTheTest, у которого бекграунд появляется помогло, а как быть с LangSwitcher?, он же EN?

@HAIRY · 20.12.2019, 19:10

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

а как быть с LangSwitcher?, он же EN?

ну так тоже самое добавить

CSS
1
border: 1px solid rgba(255, 255, 255, .1);

Новые блоги и статьи Все статьи Все блоги /
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .

@BoxOfWonders 0 / 0 / 0 Регистрация: 20.12.2019 Сообщений: 4
	20.12.2019, 15:19 [ТС]
	Спасибо, с TakeTheTest, у которого бекграунд появляется помогло, а как быть с LangSwitcher?, он же EN? 0