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

Question

在用户停留一定时间后，我试图放大一张图片。

这是为了一个离子的应用

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

            width: 30vw;
        }
    }
}

我希望图片放大后，用户已经悬停在图片至少.1或更短的秒，以防止所有图片放大时，通过图片。

Answer 1

您希望为此使用transition-delay。

transition-delay属性指定何时开始转换效果。 transition-delay值以秒或毫秒(ms)为单位定义。

来源。

我复制了一个小示例(使用默认的CSS，这样它就可以工作了)。

​

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>

​

来源。