Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 20.12.2019
Сообщений: 3
1

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

20.12.2019, 09:06. Просмотров 606. Ответов 5
Метки нет (Все метки)


Всем привет.
В общем, нужно чтобы у двух дивов был ховер с бекграундом. При наведение на первый див 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;
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
20.12.2019, 09:06
Ответы с готовыми решениями:

Как убрать подергивания при ховере?
Здравсnвуйте! Чет не пойму на как убрать подергивания при ховере вот здесь где товары...

Как покрасить свг-шку при ховере?
Только начинаю разбираться с манипуляциями над векторной графикой. Картинка сохранена из шаблона,...

Градиент при ховере
как такой градиент(фон) сделать? сам стиль? Если ещё кто нибудь объяснил бы как он градиенты эти...

Дерганая анимация при ховере
Пишу простенькую анимацию на каскадных таблицах стилей, проблема следующая: #container { ...

5
28 / 22 / 11
Регистрация: 24.01.2011
Сообщений: 476
20.12.2019, 10:26 2
Скинь 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;
}
0
0 / 0 / 0
Регистрация: 20.12.2019
Сообщений: 3
20.12.2019, 10:43  [ТС] 3
Вот 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>
0
28 / 22 / 11
Регистрация: 24.01.2011
Сообщений: 476
20.12.2019, 10:58 4
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);
1
0 / 0 / 0
Регистрация: 20.12.2019
Сообщений: 3
20.12.2019, 15:19  [ТС] 5
Спасибо, с TakeTheTest, у которого бекграунд появляется помогло, а как быть с LangSwitcher?, он же EN?
0
28 / 22 / 11
Регистрация: 24.01.2011
Сообщений: 476
20.12.2019, 19:10 6
Цитата Сообщение от BoxOfWonders Посмотреть сообщение
а как быть с LangSwitcher?, он же EN?
ну так тоже самое добавить
CSS
1
border: 1px solid rgba(255, 255, 255, .1);
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
20.12.2019, 19:10

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Сменить цвет при ховере
Есть такое меню для сайта: Как сделать, чтобы при наведении на каждую кнопку менялся цвет...

при ховере бордер не проподает
Учусь верстать много траблов, нужен взгляд со сторонны профи)) И какое-нибудь направление в нужное...

Мельтешение листов на экране
В моем макросе выполняются разл.действия с листами, при этом на экране отображается весь...

Неверное отображение дивов - как исправить?
Здравствуйте! Проблема такая. Есть страница с указанным ниже содержанием. В реальности дивов...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.