html - 要求用户将鼠标悬停在图片上一段时间

Question

我正在尝试在用户悬停特定时间后放大图片。

这是一个 ionic 应用

ion-grid {
    padding: 0;
    ion-col {
        padding: 0;
        &:hover {

            width: 30vw;
        }
    }
}

我希望在用户将鼠标悬停在图片上至少 0.1 秒或更短时间后放大图片，以防止所有图片在经过图片时放大。

Answer 1

你想为此使用transition-delay。

The transition-delay property specifies when the transition effect will start.
The transition-delay value is defined in seconds (s) or milliseconds (ms).

Source .

我复制了一个小示例(使用默认 CSS，因此它确实适用于 SO)。

div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition-property: width;
  /* Safari */
  -webkit-transition-duration: 2s;
  /* Safari */
  -webkit-transition-delay: 1s;
  /* Safari */
  transition-property: width;
  transition-duration: 2s;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}

<h1>The transition-delay Property</h1>

<p>Hover over the div element below, to see the transition effect (Note that the transition effect will wait 1 second before starting):</p>

<div></div>

Source .