要求用户将鼠标悬停在图片上一定的时间

Question

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

这是用于离子应用

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

            width: 30vw;
        }
    }
}

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

Answer 1

您要为此使用transition-delay。

  

transition-delay属性指定过渡效果何时开始。
  transition-delay值以秒（s）或毫秒（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。