Question

我想要以下过程：图像（不是图像 - 它将是纯色），当鼠标悬停在1秒内时，文本将发生变化（check this）。

我该怎么做？

Answer 1

使用jQuery：

$("#my-image").on("mouseover", function () {
  setTimeout(function () {
    $("#my-image").src = "/path/to/image-two.png";
  }, 1000); // 1000 is your one second
});

Answer 2

您可以使用像setTimeOut（）这样的js函数，或者如果你想使用setInterval（）

显示定时文字：

var x = document.getElementById("txt");
setTimeout(function(){x.value="2 seconds"},2000);
setTimeout(function(){x.value="4 seconds"},4000);
setTimeout(function(){x.value="6 seconds"},6000);

在你的情况下：

onmouseover = "seTimeOut(call Function(), 1000);"

函数中的

{ 例如，阻止旧图像旧文本并显示新图像和新文本 css属性显示，内联或块显示，无显示。

document.getElementById("text").style.display = 'none';
document.getElementById("new-text").style.display = 'inline' or 'block';

}

我希望它有所帮助。

Answer 3

您可以使用css在鼠标悬停时更改图像。

<div class="imgclass"></div>

.imgclass{
   background-image: url('img.jpg');
   height: 70px;
   width: 120px;
}

.imgclass:hover {
   background-image: url('hoverimg.jpg');
}

Answer 4

<script type="text/javascript">
/*<![CDATA[*/

var myimages=[
 ['http://www.elsema.com/photos/foborg.jpg',['FOB43301','1-Button, Keyring Remote'],['FOB43301L','1-Large Button, Keyring Remote'],['FOB43302','2-Button, Keyring Remote',''],['FOB43304','4-Button, Keyring Remote',''],['FOB43305','5-Button, Keyring Remote','']],
 ['http://www.elsema.com/photos/fobblk.jpg',['FOB43301BLACK','1-Button, Keyring Remote Black'],['FOB43301LBLACK','1-Large Button, Keyring Remote Black'],['FOB43302BLACK','2-Button, Keyring Remote Black',''],['FOB43304BLACK','4-Button, Keyring Remote Black',''],['FOB43305BLACK','5-Button, Keyring Remote Black','']],
 ['http://www.elsema.com/photos/fobblu.jpg',['FOB43301BLUE','1-Button, Keyring Remote Blue'],['FOB43301LBLUE','1-Large Button, Keyring Remote Blue'],['FOB43302BLUE','2-Button, Keyring Remote Blue',''],['FOB43304BLUE','4-Button, Keyring Remote Blue',''],['FOB43305BLUE','5-Button, Keyring Remote Blue','']],
 ['http://www.elsema.com/photos/fobred.jpg',['FOB43301RED','1-Button, Keyring Remote Red'],['FOB43301LRED','1-Large Button, Keyring Remote Red'],['FOB43302RED','2-Button, Keyring Remote Red',''],['FOB43304RED','4-Button, Keyring Remote Red',''],['FOB43305RED','5-Button, Keyring Remote Red','']]
];

for (var src,z0=0;z0<myimages.length;z0++){
 src=myimages[z0][0];
 myimages[z0][0]=new Image();
 myimages[z0][0].src=src;
}

function changeimage(a){
 document.getElementById('targetimage').src=a[0].src;
 var r=document.getElementById('mytable').rows ;
 for (var r=document.getElementById('mytable').rows,c,z0=1;z0<r.length;z0++){
  c=r[z0].cells;
  c[0].innerHTML=a[z0][0];
  c[1].innerHTML=a[z0][1];
 }
}

/*]]>*/
</script>
</head>

<body>

<p>
<a href="#" onMouseover="changeimage(myimages[0],this.href)";><img src="http://www.elsema.com/auto/../images/orange.jpg" alt="Most secure remote on market" width="107" height="31" /></a>
                    <a href="#" onMouseover="changeimage(myimages[1],this.href) "><img src="http://www.elsema.com/auto/../images/black.jpg" alt="Most secure remote on market" width="107" height="31" /></a>
                    <a href="#" onMouseover="changeimage(myimages[2],this.href)";><img src="http://www.elsema.com/auto/../images/blue.jpg" alt="Most secure remote on market" width="107" height="31" /></a>
                    <a href="#" onMouseover="changeimage(myimages[3],this.href)";><img src="http://www.elsema.com/auto/../images/red.jpg" alt="Most secure remote on market" width="107" height="31" /></a>

                  <p>&nbsp;</p>
                            <p> <p><a href="javascript:warp()"><img src="http://www.elsema.com/auto/../photos/foborg.jpg" id="targetimage" border=0></a><br />
                                  </p>&nbsp; </p>
                          <table width="562" border="1" align="center" id="mytable" >
                            <tr bgcolor="#FF6633">
                              <th width="132" bgcolor="#FF9933" scope="col">Part Number</th>
                              <th width="361" bgcolor="#FF9933" scope="col">Description </th>
                            </tr>
                            <tr>
                              <td><strong>FOB43301</strong></td>
                              <td>1-Button, Keyring Remote </td>
                            </tr>
                            <tr>
                              <td><strong>FOB43301L</strong></td>
                              <td>1-Large Button, Keyring Remote </td>
                            </tr>
                            <tr>
                              <td><strong>FOB43302</strong></td>
                              <td>2-Button, Keyring Remote </td>
                            </tr>
                            <tr>
                              <td><strong>FOB43304</strong></td>
                              <td>4-Button, Keyring Remote </td>
                            </tr>
                            <tr>
                              <td><strong>FOB43305</strong></td>
                              <td>5-Button, Keyring Remote </td>
                            </tr>
                          </table>
                          <p>&nbsp;</p>
                          <p><em><span lang="EN-US" xml:lang="EN-US">The FOB remotes are available in            different colours. Add the            colour code to the end of the part</span></em></p>
                          <p><em><span lang="EN-US" xml:lang="EN-US">number            to order a different colour. No colour code in the part number            is the standard            orange.</span></em></p>
                          <p><span class="red"><strong><span lang="EN-US" xml:lang="EN-US">RED = Red </span><span lang="EN-US" xml:lang="EN-US"></span></strong></span><strong><span lang="EN-US" xml:lang="EN-US">             <span class="blue">BLU = Blue</span>            <span class="black">BLK            = Black</span>           <span class="orange"> xxx =              Orange</span></span></strong></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
                        </div>

</body

图像，文字和时间延迟

4 个答案: