设置鼠标悬停时图像需要更改的时间

Question

我想在JavaScript中设置鼠标悬停功能的时间。

我的代码如下。

<img class="product-image" 
  src='<?php echo $item['0']; ?>' 
  onmouseover="this.src='<?php echo $item2['0']; ?>'" 
  onmouseout="this.src='<?php echo $item['0']; ?>'" />.

此代码工作正常但我想设置图像替换鼠标悬停事件的时间。

Answer 1

您可以创建此JavaScript函数，仅在t毫秒之后更改图像。

function delayedImage(obj, src, t)
{
  setTimeout(function() {
    obj.src = src;
  }, t);
}

然后使用此HTML：

<img class="product-image" 
  src='<?php echo $item['0']; ?>' 
  onmouseover="delayedImage(this, '<?php echo $item2['0']; ?>', 2000)" 
  onmouseout="delayedImage(this, '<?php echo $item['0']; ?>', 2000)" />

虽然你可能不需要mouseout，但这很容易改变：）