Класс CSS для перехода на лету для javaScript

Мне нужна ваша помощь в использовании переходов CSS3. У меня есть некоторые утверждения, что я хочу прилететь справа в определенное положение при зависании. Этого можно добиться с помощью CSS в правиле :hover. Однако я хочу вызвать этот эффект из функции JavaScript, поэтому мне нужна ваша помощь.

Вот код:

#blockcart-wrapper .cart-preview .header {
  border: none;
}
#blockcart-wrapper .cart-preview .header .cart-icon {
  width: 25px;
  height: 28px;
}
.cart-preview {
  float: right;
  position: relative;
}
.cart-preview a,
.cart-preview a:hover,
.cart-preview a:visited {
  text-decoration: none;
  color: inherit;
}
.cart-preview .header {
  display: block;
  font-weight: bold;
  border: 1px solid #808080;
  padding: 5px;
  cursor: pointer;
  background-color: #fff;
}
.cart-preview .body {
  display: none;
  width: 400px;
  background-color: #fff;
  right: 0;
}
.cart-preview:hover .body {
  display: block;
  position: absolute;
}
.cart-preview.cart-overview {
  width: 100%;
  position: inherit;
}
.cart-preview.cart-overview .body {
  display: block;
  position: inherit;
  width: 100%;
}
.cart-preview .header > :first-child {
  float: left;
}
.cart-preview .header > :last-child {
  float: right;
}
.cart-preview .header::after,
.cart-preview .cart-totals > div::after {
  clear: both;
  content: "\A0";
}
.cart-preview .body {
  border: 1px solid #808080;
  padding: 2px;
}
.cart-preview ul {
  margin: 0;
  padding: 0;
  margin-top: 20px;
  margin-bottom: 20px;
}
.cart-preview li {
  list-style: none;
  margin-bottom: 15px;
}
.cart-preview li > * {
  display: inline-block;
  vertical-align: top;
}
.cart-preview li .product-quantity {
  color: #666;
  width: 10%;
}
.cart-preview .product-quantity::after {
  content: 'x';
}
.cart-preview li .product-name {
  width: 50%;
}
.cart-preview li .product-price {
  width: 20%;
}
.cart-preview li .remove-from-cart {
  text-indent: 100%;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  text-decoration: none;
  color: inherit;
  font-weight: bold;
  width: 2em;
  white-space: nowrap;
  float: right;
}
.cart-preview li .remove-from-cart::before {
  content: 'X';
  text-indent: 0px;
  border: 1px solid #ccc;
  border-radius: 100%;
  width: 1em;
  height: 1em;
  padding: 2px;
  text-align: center;
  background-color: #333;
  color: #fff;
  float: left;
}
.cart-preview .cart-totals .label {
  float: left;
}
.cart-preview .cart-totals .value {
  float: right;
}
.cart-preview .cart-totals > div {
  clear: both;
  border-bottom: 1px solid #ccc;
}
.cart-preview .cart-totals > div:not(:last-child) {
  margin-bottom: 5px;
}
.cart-totals .label {
  font-weight: bold;
}
#blockcart-modal {
  position: fixed;
  background-color: rgba(255,255,255,0.1);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
}
#blockcart-modal > div {
  padding: 20px;
  display: inline-block;
  min-width: 50%;
  min-height: 400px;
  margin-top: 200px;
  text-align: left;
  background-color: #fff;
  z-index: 100;
  border: 1px solid #ccc;
}

<div id = "blockcart-wrapper">
  <div class = "blockcart cart-preview">
    <div class = "header">
      <a rel = "nofollow" href = "#">
        <img class = "cart-icon" src = "https://fakeimg.pl/50x50/?text=cart+icon">
      </a>
    </div>
    <div class = "body">
      <ul>
              </ul>
      <div class = "cart-subtotals">
                  <div class = "products">
            <span class = "label">Partial sum</span>
            <span class = "value">0</span>
          </div>
                  <div class = "">
            <span class = "label"></span>
            <span class = "value"></span>
          </div>
                  <div class = "shipping">
            <span class = "label">Shipping</span>
            <span class = "value">0</span>
          </div>
                  <div class = "">
            <span class = "label"></span>
            <span class = "value"></span>
          </div>
              </div>
      <div class = "cart-total">
        <span class = "label">Total sum</span>
        <span class = "value">0</span>
      </div>
    </div>
  </div>
</div>

Итак, я хочу добиться, чтобы div с классом body влетал справа в определенное положение, используя собственный класс, поэтому я могу переключать класс с помощью JavaScript, если запускается определенное внешнее событие, и класс должен содержать только эффект перехода , поэтому браузер выполняет «обратный переход», когда наведение курсора прекращается или класс удаляется функцией JavaScript. Вы можете мне здесь помочь?

html css

21.08.2018 09:03

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

153

Ответы 1

CSS должен быть таким же, как если бы вы использовали :hover, просто вместо :hover добавьте класс в селектор (a.hovered) и используйте события js mouseover и mouseout для переключения этого класса.

CSS -

div.body.hovered {
    right: 300px; /*or however you meant to do the transition*/
}

JS -

var elements = document.getElementsByClass('body');
elements.addEventListener("mouseover", function( event ) { 
    this.classList.add('hovered');
});
elements.addEventListener("mouseout", function( event ) { 
    this.classList.remove('hovered');
});

Не могли бы вы объяснить, что вы хотите, чтобы я сделал?

— 21.08.2018 09:17

21.08.2018 09:09