CSS: зависание - PullRequest
Новая
       23

CSS: зависание

0 голосов
/ 07 января 2020

У меня есть проблема, связанная с: hover в CSS.

Это мой HTML код для меню навигации: 

<div class="nav">
    <a href="2d.html" class="nav1">2D</a>
    <br>
    <a href="3d.html" class="nav2">3D</a>
</div>

Это код CSS : 

.nav {
position: absolute;
font-family: 'Oswald', sans-serif;
font-weight: 900;
font-size: 50px;
letter-spacing: 5px;
z-index: 20;
color: white;
float: right;
direction: rtl;
top: 50%;
right: 100px;
margin-top: -120px;

.nav1 {
text-decoration: none;
position: relative;
color: #43A3E8;
left: 0;
transition: left ease 0.5s;

.nav1:hover{
left: -35px;

.nav2 {
text-decoration: none;
position: relative;
color: #C944F5;
left: 0;
transition: left ease 0.5s;

.nav2:hover{
left: -35px;

Теперь тексты «2D» и «3D» дергаются, когда курсор находится в неправильном положении (половина текста и половина пустого места). Я знаю, что это обычная проблема, и я погуглил ее, но я не могу применить ее к своему коду ...

Было бы удивительно, если бы кто-то мог помочь мне там!

Спасибо вы!

1 Ответ

0 голосов
/ 07 января 2020

Сначала убедитесь, что вы добавляете закрывающие скобки в конце каждой декларации CSS.

Преобразуйте теги <a> в интервалы и сохраняйте в них содержимое навигации.

Переместите ссылку влево от диапазона и задайте ему новый класс. Затем вы можете расположить его так, чтобы он перекрывал элемент навигации, и сделать его шириной всего перехода. Сделайте так, чтобы фон был прозрачным.

Наконец, отредактируйте наведение CSS, сделав так, чтобы при наведении курсора на оверлей он активировал переход. 

/* OVERLAYS */

.overlay-one {
  position: absolute;
  background-color: transparent;
  top: 50%;
  margin-top: -55px;
  height: 50px;
  width: 150px;
  z-index: 1000000;
}

.overlay-two {
  position: absolute;
  background-color: transparent;
  top: 50%;
  margin-top: 15px;
  height: 50px;
  width: 150px;
  z-index: 1000000;
}


/***********/

.nav {
  position: absolute;
  font-family: 'Oswald', sans-serif;
  font-weight: 900;
  font-size: 50px;
  letter-spacing: 5px;
  z-index: 20;
  color: white;
  float: right;
  direction: rtl;
  top: 50%;
  right: 100px;
  margin-top: -120px;
}

.nav1 {
  text-decoration: none;
  position: relative;
  color: #43A3E8;
  left: 0;
  transition: left ease 0.5s;
}


/* HOVER CODE */

.overlay-one:hover+.nav1 {
  left: -35px;
}

.nav2 {
  text-decoration: none;
  position: relative;
  color: #C944F5;
  left: 0;
  transition: left ease 0.5s;
}

.overlay-two:hover+.nav2 {
  left: -35px;
}
<div class="nav">
  <a href="2d.html" class="overlay-one"></a><span class="nav1">2D</span>
  <br>
  <a href="3d.html" class="overlay-two"></a><span class="nav2">3D</span>
</div>
...