Question

我需要您使用CSS3过渡的帮助。我想在悬停时想从右边飞到其定义的位置。可以使用:hover规则中的CSS来实现。
但是，我想从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>

所以我想实现，类body的div使用自己的类从右边移到其确定的位置，因此，如果触发了某个外部事件并且该类仅应包含过渡效果，因此当悬停停止或该类被JavaScript函数删除时，浏览器将执行“反向过渡”。
你能在这里帮我吗？

Answer 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');
});

CSS脚本过渡中的CSS类

1 个答案: