У меня проблема с этой панелью навигации. Все кнопки двигаются при наведении мыши на нее - PullRequest
Новая
       4

У меня проблема с этой панелью навигации. Все кнопки двигаются при наведении мыши на нее

0 голосов
/ 27 января 2019

При наведении курсора мыши на кнопку все кнопки перемещаются 

body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}

.nav{
text-align: center;
}

.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 10px;
border-radius: 0 0 10px 10px;
transition: 0.2s;
}

.nav div:hover
{
padding-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
	<div>
		Other info
	</div>
	<div>
		main
	</div>
	<div>
		my projects
	</div>
</nav>
</body>
</html>

Я ожидал, что будет двигаться только одна кнопка, но это не так. Мне нужно написать несколько слов здесь, потому что stackoverflow не позволяет мне публиковать это. Также извините за мой английский, если это плохо.

Ответы [ 2 ]

0 голосов
/ 27 января 2019

Вы можете сделать это так 

body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}

.nav{
text-align: center;
}

.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 25px 10px 10px;
border-radius: 0 0 10px 10px;
transform: translateY(-25px);
transition: 0.2s;
}

.nav div:hover
{
  transform: translateY(-5px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
	<div>
		Other info
	</div>
	<div>
		main
	</div>
	<div>
		my projects
	</div>
</nav>
</body>
</html>
0 голосов
/ 27 января 2019

Кнопки являются родными и чувствительными к изменениям друг друга.Если один из братьев изменится padding-top или padding-bottom, это повлияет на остальных.У них один и тот же родитель, и при изменении одной кнопки padding-top изменит высоту родительского элемента, затрагивая все дочерние элементы (кнопки).

Вместо этого при наведении курсора можно использовать преобразование, например: 

.nav div:hover
{
    transform: translateY(-25px);
}

Преобразование воздействует на элемент индивидуально, ничего не меняя вокруг.Надеюсь, поможет.Удачи.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...