Ни наведение, ни анимация не работают в CSS3

ProgramBox

Ни наведение, ни анимация не работают в CSS3

Post author:admin
Запись опубликована:29 июня, 2022
Post category:Вопросы по программированию

#html #css

Вопрос:

Используя HTML5 и CSS3, я пытаюсь создать контейнер div, который при наведении на него курсора мыши выдвигается и показывает больше текста. Это определенно не очень хороший, эффективный код, я просто пытаюсь заставить основы работать для более позднего проекта. При наведении курсора мыши на div ничего не происходит. Я попытался прокомментировать анимационную часть и посмотреть, будет ли работать только наведение, но это не так. Я попытался все прокомментировать и написать очень простую анимацию, которая не требовала взаимодействия с пользователем, и это тоже не сработало. Я попытался запустить весь свой код через грязную разметку, и он не смог найти никаких проблем. Поскольку код такой маленький, я не создавал отдельную таблицу стилей, все находится в HTML-файле, и в нем нет элемента JavaScript.

Я застрял. Я понятия не имею, почему ни наведение, ни анимация не работают.

Я написал код в VSCode и просматривал файл в Mozilla Firefox.

 #divHover {
  width: 30px;
  height: 260px;
  background-color: burlywood;
  font-size: 12pt;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Arial', 'sans-serif';
  float: left;
}

div ul {
  display: none;
}

div.hoverButton:hover {
  width: 300px;
  height: 260px;
  animation-name: listOut;
  animation-duration: 3s;
  animation-iteration-count: 1;
  -moz-animation-name: listOut;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: 1;
  -webkit-animation-name: listOut;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: 1;
}

div.hoverButton:hover>p {
  display: block;
}

@keyframes listOut {
  from {
    left: 0px;
  }
  to {
    left: 270px;
  }
}

@-moz-keyframes listOut {
  from {
    left: 0px;
  }
  to {
    left: 270px;
  }
}

@-webkit-keyframes listOut {
  from {
    left: 0px;
  }
  to {
    left: 270px;
  }
}

 <div class="hoverButton" id="divHover">
  <p>D<br>i<br>d<br><br>y<br>o<br>u<br><br>k<br>n<br>o<br>w<br>?<br>
    <ul>
      <li>Only 10% of people who look at a webpage are actually looking for information. Most people are just looking for some form of entertainment</li>
    </ul>
  </p>
</div>

1. Вам не нужны все эти префиксы поставщиков для анимации CSS

2. Было бы полезно, если бы вы предоставили более реальный пример. Хорошие решения зависят от более четкого видения изображения.

Ответ №1:

Несколько вещей, которые необходимо решить:

position Для left работы свойств and необходимо задать значение top
ul элементы не должны быть дочерними элементами p элементов
Вам не нужно float для основного элемента

В целом, это кажется странным выбором для анимации. Вы хотите, чтобы поле увеличивалось, а не перемещалось вправо?

 #divHover {
  width: 30px;
  height: 260px;
  background-color: burlywood;
  font-size: 12pt;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Arial', 'sans-serif';
  position: relative;
}

div ul {
  display: none;
}

#divHover:hover {
  width: 300px;
  transition: all 3s ease;
  animation-name: listOut;
  animation-duration: 3s;
  animation-iteration-count: 1;
  -moz-animation-name: listOut;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: 1;
  -webkit-animation-name: listOut;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: 1;
}

/* change to ul */
#divHover:hover ul {
  display: block;
}

@keyframes listOut {
  from {
    left: 0px;
  }
  to {
    left: 270px;
  }
}

@-moz-keyframes listOut {
  from {
    left: 0px;
  }
  to {
    left: 270px;
  }
}

@-webkit-keyframes listOut {
  from {
    left: 0px;
  }
  to {
    left: 270px;
  }
}

 <div class="hoverButton" id="divHover">
  <p>D<br>i<br>d<br><br>y<br>o<br>u<br><br>k<br>n<br>o<br>w<br>?<br>
   </p>
   <ul>
      <li>Only 10% of people who look at a webpage are actually looking for information. Most people are just looking for some form of entertainment</li>
    </ul>
</div>

Редактировать:

Вот лучшее решение (нет необходимости keyframes ):

 #divHover {
  width: 30px;
  height: 260px;
  background-color: burlywood;
  font-size: 12pt;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Arial', 'sans-serif';
  position: relative;
  display: flex;
}

div ul {
  display: none;
  overflow: hidden;
}

#divHover:hover {
  width: 300px;
  transition: all 3s ease;
}


/* change to ul */

#divHover:hover ul {
  display: flex;
}

 <div class="hoverButton" id="divHover">
  <p>D<br>i<br>d<br><br>y<br>o<br>u<br><br>k<br>n<br>o<br>w<br>?<br>
  </p>
  <ul>
    <li>Only 10% of people who look at a webpage are actually looking for information. Most people are just looking for some form of entertainment</li>
  </ul>
</div>

1. На данном этапе я рад, что он может что-то делать, расти или двигаться вправо — это нормально. В какой-то момент мне понадобится, чтобы основной элемент плавал, потому что, если я смогу заставить это работать, он будет слева от основного текста. Я попробую установить позицию, и я удалю тег p.

2. Ах .. вам не нужно float в будущем. Лучшим подходом было бы использовать flex or grid . Я могу обновить этот пример.

3. @Mimsy32 добавил еще один пример

4. Все в порядке, я подожду, пока в моем курсе появятся flex и grid, это должно произойти довольно скоро. Я не знал, что мне нужно было установить позицию. Теперь это начало работать. Я запомню это в будущем. Спасибо!

Метки: ни анимация не работают в CSS3, Ни наведение