Question

我有以下HTML / CSS

.cart-preview .body {
  visibility: hidden;
  position: fixed;
  width: 400px;
  height: 100%;
  z-index: 99;
  background-color: #fff;
  right: -20;
}

.cart-preview:hover .body {
  visibility: visible;
  position: fixed;
  transition: right 1s linear;
  right: 0;
}

<div class="body">
  <ul>
  </ul>
  <div class="cart-subtotals">
    <div class="products">
      <span class="label">Subtotal</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>

我想让.body类占据整个显示器的高度，这对于底部来说很好用，但是在顶部，尽管位置固定，但没有填充空间。正确的属性以及过渡也不起作用。

该元素位于更右侧，但是我为right:输入的所有值都没关系，div保持在相同位置。
我想在飞机上悬停动画，也许有人可以帮助我调整高度和高度。

BTW：这是MVCE。 body div嵌套在其他div中，并且它们大多数是相对位置的，因此我对body使用固定位置，并且没有发布嵌套该主体的其他div。

Answer 1

right:-20;不起作用。您应该在那里定义测量单位。现在过渡在我的小提琴中也很好用。

检查一下，让我知道这里是否有问题。

http://jsfiddle.net/Sampath_Madhuranga/Lwebxhkn/8/

.cart-preview {
  position:relative;
}

.cart-preview .body {
  visibility: hidden;
  position: fixed;
  width: 400px;
  height: 100%;
  z-index: 99;
  background-color: #fff;
  right: -20px;
}
.cart-preview:hover .body {
  visibility: visible;
  position: fixed;
  transition: right 1s linear;
  right: 0;
}

<div class="cart-preview">
  <span>cart preview</span>
  <div class="body">
      <ul>
              </ul>
      <div class="cart-subtotals">
                  <div class="products">
            <span class="label">Subtotal</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>

谢谢

CSS权限：-50，过渡不起作用

1 个答案: