javascript onmouseover 不能在 chrome 上工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21485580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onmouseover not working on chrome?
提问by sam
i want to use onmouseover so that it replaces preview picture with thumbnail picture when mouse is on it.. below code works fine on firefox and IE but not working on chrome.. here is the link where it is applied samdesign.comli.com/gallery.html
我想使用 onmouseover 以便它在鼠标放在上面时用缩略图替换预览图片..下面的代码在 firefox 和 IE 上工作正常，但不适用于 chrome.. 这是应用它的链接samdesign.comli.com/画廊.html
<div class="gallery" align="center">
<h1>Photo Gallery</h1><br/>
<div class="thumbnails">
<img onMouseOver="preview.src=img1.src" id="img1" src="images/Salman_Siddiqui.jpg" alt="Image Not Loaded"/>
<img onMouseOver="preview.src=img2.src" id="img2" src="images/slide6.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img3.src" id="img3" src="images/slide1.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img4.src" id="img4" src="images/slide2.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img5.src" id="img5" src="images/slide3.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img6.src" id="img6" src="images/slide4.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img7.src" id="img7" src="images/slide5.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img8.src" id="img8" src="images/slide7.jpg" alt="Image Not Loaded"/>
</div><br/>
<div class="preview" align="center">
<img id="preview" src="images/Salman_Siddiqui.jpg" alt="No Image Loaded"/>
</div>
<br/>
</div>
回答by antyrat
Try using getElementByIdinstead:
尝试使用getElementById：
onmouseover="document.getElementById('preview').src=document.getElementById('img8').src"
回答by Diesel9 - Dan
Try this, but instead of calling each image ID just use "this".
试试这个，但不要调用每个图像 ID，只需使用“this”。
onmouseover="document.getElementById('preview').src=this.src"
回答by Skwal
If you want to avoid all the inline JavaScript in your code, I suggest you put it all in a separate <script>tage or in its own js file.
Here's how your code would look like:
如果您想避免代码中的所有内联 JavaScript，我建议您将它们全部放在一个单独的<script>标签中或放在它自己的 js 文件中。您的代码如下所示：
<h1>Photo Gallery</h1><br/>
<div class="thumbnails" id="thumbnails">
<img id="img1" src="https://www.google.ca/images/srpr/logo11w.png" alt="Image Not Loaded"/>
<img id="img2" src="images/slide6.jpg" alt="Image Not Loaded"/>
<img id="img3" src="images/slide1.jpg" alt="Image Not Loaded"/>
<img id="img4" src="images/slide2.jpg" alt="Image Not Loaded"/>
<img id="img5" src="images/slide3.jpg" alt="Image Not Loaded"/>
<img id="img6" src="images/slide4.jpg" alt="Image Not Loaded"/>
<img id="img7" src="images/slide5.jpg" alt="Image Not Loaded"/>
<img id="img8" src="images/slide7.jpg" alt="Image Not Loaded"/>
</div><br/>
<div class="preview" align="center">
<img id="preview" src="images/Salman_Siddiqui.jpg" alt="No Image Loaded"/>
</div>
<br/>
</div>
<script type="text/javascript">
var imgs = document.getElementById('thumbnails').getElementsByTagName('img');
var preview = function(e) {
document.getElementById('preview').src = document.getElementById(e.target.id).src;
};
for (var i=0, j=imgs.length; i<j; i++) {
imgs[i].addEventListener('mouseover', preview, false);
}
</script>
Edit:And if you use jQuery (since you tagged it), it's even easier:
编辑：如果你使用 jQuery（因为你标记了它），那就更容易了：
$('#thumbnails > img').hover(function() {
$('#preview').attr('src', $(this).attr('src'));
});
回答by chiliNUT
In some browsers, ids are automatically made into javascript variables. In others, like Chrome, they are not. It is bad practice to assume the variable exists for this exact reason. antyrat's answer should work for you.
在某些浏览器中，id 会自动生成 javascript 变量。在其他情况下，例如 Chrome，它们不是。出于这个确切原因假设变量存在是不好的做法。antyrat 的答案应该适合你。
