Question

我正在使用Twine（版本2，Harlowe 2.1.0），当我将鼠标悬停在它上面时，我希望.choices能够平稳地向右移动。 .choices上的所有其他转换都可以正常工作，但是由于某种原因，移动是仅在状态之间切换的唯一转换。我尝试指定应适用的过渡方式，但结果与否相同。这是所有相关代码的JSFiddle link。尽管此版本可能很丑陋且具有误导性，但悬停行为的工作方式与Twine中的行为完全一样。

相关的HTML和CSS：

    <div class="choices"><div class="shape"></div>[[Color selections|Colors]]</div>

    <div class="choices"><div class="shape"></div>[[Pop-up test let us see how far we can stretch this|Pop-up test passage]]</div>


    .choices {
      background-color: #B3AE99;
      position: relative;
      width: 250px;
      padding: 10px;
      transition: all 0.5s ease-in-out;
      color: #4F4D44;
    }

    .choices tw-link {
      color: #4F4D44;
      vertical-align: center;
      transition: all 0.5s ease-in-out;
    }

    .choices:hover {
      background-color: #666357;
      right: -25px;
      transition: all 0.5s ease-in-out;
    }

    .choices:hover tw-link {
      color: #CAC4AC;
    }

    .shape {
      height: 25px;
      width: 25px;
      background-color: #4F4D44;
      float: left;
      margin-right: 10px;
      margin-top: 5px;
      margin bottom: 10px;
      vertical-align: middle;
      padding: 10px;
      transition: all 0.5s ease-in-out;
    }

    .choices:hover .shape {
      background-color: #CAC4AC;
    }

Answer 1

将right:0设置为.choices。转换需要指定初始状态。

tw-story {
  background-color: #CBC6AE;
  background-image: url("images/Background.png");
  color: #524F47;
  font-family: Futura, Impact, Helvetica, sans-serif;
}

.choices {
  background-color: #B3AE99;
  position: relative; right:0;
  width: 250px;
  padding: 10px;
  transition: all 0.5s ease-in-out;
  color: #4F4D44;
}

.choices tw-link {
  color: #4F4D44;
  vertical-align: center;
  transition: all 0.5s ease-in-out;
}

.choices:hover {
  background-color: #666357;
  right: -25px;
  transition: all 0.5s ease-in-out;
}

.choices:hover tw-link {
  color: #CAC4AC;
}

.shape {
  height: 25px;
  width: 25px;
  background-color: #4F4D44;
  float: left;
  margin-right: 10px;
  margin-top: 5px;
  margin bottom: 10px;
  vertical-align: middle;
  padding: 10px;
  transition: all 0.5s ease-in-out;
}

.choices:hover .shape {
  background-color: #CAC4AC;
}

<div class="choices"><div class="shape"></div>[[Color selections|Colors]]</div>
<p>
<p>
<p>
<p>
<div class="choices"><div class="shape"></div>[[Pop-up test let us see how far we can stretch this|Pop-up test passage]]</div>

Twine CSS可以转换div上除运动之外的所有内容

1 个答案: