Question

以下是我的代码，这是基本问题，任何人都可以帮助解决这个问题，我希望图像在用户悬停在其上之后出现。比如说3秒

            function MouseRollover(MyImage) {
              MyImage.src = "http://www.blirk.net/wallpapers/800x600/universe-wallpaper-2.jpg";
            }

            function MouseOut(MyImage) {
              MyImage.src = "https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg";
            }

<div align="center">
  <!--The rollover image displays here.-->
  <img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg" border="0px" width="" height="" onMouseOver="setTimeout(MouseRollover(this), 3000);" onMouseOut="MouseOut(this)" />
</div>

Answer 1

您可以在函数内设置setTimeout，使其不会像下面一样将图像源更改为3秒。虽然在此示例中，如果用户在3秒之前停止悬停，则onMouseOut将在onMouseOver之前完成触发，从而为用户留下悬停的图像。

<html>
<head>
<script language="javascript">
    function MouseRollover(MyImage) {
        setTimeout(function(){
            MyImage.src = "http://media.giphy.com/media/DOs3KXoWEpTxK/giphy-tumblr.gif";
         }, 3000); 
    }
    function MouseOut(MyImage) {
        MyImage.src = "http://plusquotes.com/images/quotes-img/cool_cat.jpg";
    }
</script>
</head>
<body>
<div align="center">
<!--The rollover image displays here.-->
<img src="http://plusquotes.com/images/quotes-img/cool_cat.jpg"
border="0px" 
width="300px" height="auto" 
onMouseOver="MouseRollover(this)" 
onMouseOut="MouseOut(this)" />
</div>
</body>
</html>

Answer 2

好的，下面是一个脚本，它会在鼠标移动后3秒更改图像。我稍微修改了您的代码，因为当脚本没有嵌入HTML时，它更容易使用脚本。希望这会有所帮助。

＆＃13;

const universe = 'http://www.blirk.net/wallpapers/800x600/universe-wallpaper-2.jpg';
const rectangle = 'https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg';
const img = document.querySelector('img');

img.addEventListener('mouseover', (e) => {
  setTimeout(()=>{
    img.src = universe;
  }, 3000);
})

＆＃13;

<html>
  <head>
  </head>
  <body>
  <div align="center">
    <img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg">
  </div>
  </body>
</html>

＆＃13;

Answer 3

这是一个例子，鼠标等待3秒。

鼠标离开时也会重置..

＆＃13;

var mrSmiley = document.querySelector('.img');
var timer;
mrSmiley.onmouseenter = function () { 
  timer = setTimeout(function () {
    mrSmiley.classList.add('img-3sec');
  }, 3000);
}
mrSmiley.onmouseleave = function () { 
  clearTimeout(timer);
  mrSmiley.classList.remove('img-3sec');
}

＆＃13;

.img {
    cursor: pointer;
    width: 128px;
    height: 128px;
    background-image:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 5.8208332 5.8208335"><defs><linearGradient gradientUnits="userSpaceOnUse" y2="537.87" x2="481.51" y1="547.94" x1="481.6" id="0"><stop stop-color="#ffeb96"/><stop offset="1" stop-color="#fff1b7"/></linearGradient></defs><g transform="matrix(.43294 0 0 .43294-205.62-231.99)"><circle cx="481.66" cy="542.55" r="5.5" fill="url(#0)"/><g transform="translate(-7.44.975)"><g fill="#414141"><circle r=".6" cy="542.3" cx="485.13"/><circle r=".6" cy="542.3" cx="491.15"/></g><path d="m486.66 544.18h2.912" fill="none" fill-rule="evenodd" stroke="#414141" stroke-linecap="round" stroke-width=".275"/></g></g></svg>');
}
.img-3sec {
  background-image:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 5.8208332 5.8208335"><defs><linearGradient id="0" x1="488.2" y1="547.74" x2="488.11" y2="537.68" gradientUnits="userSpaceOnUse"><stop stop-color="#ffeb96"/><stop offset="1" stop-color="#fff1b7"/></linearGradient></defs><g transform="translate(0-291.18)"><g transform="matrix(.43294 0 0 .43294-209.18 68.12)"><g transform="translate(1.612-20.413)"><circle r="5.5" cy="542.35" cx="488.27" fill="url(#0)"/><g fill="#414141"><circle cx="485.18" cy="542.3" r=".6"/><circle cx="491.35" cy="542.3" r=".6"/></g></g><g transform="translate(-6.818-.4)" fill="#f7aa86"><path d="m499.05 523.96c0 .07.783.139.779.207-.11 1.575-1.461 2.821-3.116 2.827-1.648.006-3.01-1.222-3.135-2.788-.006-.074.305-.15.304-.225l2.82-.022z"/><path d="m493.66 523.64h6.077c.049 0 .088.039.088.088v.385c0 .049-.001.206-.001.206h-6.234c0 0-.001-.157-.001-.206v-.385c0-.049.039-.088.088-.088"/></g></g><path d="m2.113 294.66h1.594v.769.773c0 .426-.343.769-.769.769h-.057c-.426 0-.769-.343-.769-.769v-.773z" fill="#eb8671" fill-rule="evenodd"/></g></svg>');
}

＆＃13;

Mouse over Mr Happy for 3 seconds..

<div class="img">  
</div>

＆＃13;

如何为Rollover设置超时功能

3 个答案: