javascript 在鼠标悬停时显示不同的、更大的照片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19970540/
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
display a different, larger photo on mouseover
提问by JohnnyD65
Usually i'm here for help with a JavaScript class that I just started, but this on is for a personal project that I'm working on. I have code (see below) that will increase the size of a photo on mouse-over, and it works fine.
通常我是来这里寻求我刚开始的 JavaScript 类的帮助，但这是针对我正在处理的个人项目。我有代码（见下文）可以在鼠标悬停时增加照片的大小，并且它工作正常。
Problem is, I want to not only display a larger image but for one of these I'd like to also display a different image completely on mouse-over (and yes, still at a larger size too!).
问题是，我不仅想显示更大的图像，而且对于其中一个图像，我还想在鼠标悬停时完全显示不同的图像（是的，仍然以更大的尺寸显示！）。
This is what I've been working with but can't seem to get it to work correctly (the first image is a "before", and the second is an after Photoshop enhancement with both before/after side by side). Any help is greatly appreciated. Thanks...
这是我一直在使用的，但似乎无法让它正常工作（第一张图像是“之前”，第二张是之前/之后并排的 Photoshop 增强之后）。任何帮助是极大的赞赏。谢谢...
<p><a href="" target="blank"><img class="displayed" src="Images/sheriffcarB4.jpg" width="250" height="150" alt="Photoshop Enhancement" onmouseover= "this.src=Images/sheriffcarcompare.jpg" "this.width=1100;this.height=350;"onmouseout="this.width=250;this.height=150"/></a></p></div>
回答by MarsOne
Maybe something like this?
也许是这样的？
<div>
<p><a href="" target="blank"><img class="displayed" src="Images/sheriffcarB4.jpg"
width="250" height="150" alt="Photoshop Enhancement" onmouseover= "this.src='Images/sheriffcarcompare.jpg';this.width=1100;this.height=350;" onmouseout="this.width=250;this.height=150"/></a>
</p>
</div>
In the Demo wait for a secong over you hover over the image for the image src to change. This happens only because the src is a 3rd party website. It will work perfectly in your case
在演示中等待 secong 将鼠标悬停在图像上以更改图像 src。发生这种情况只是因为 src 是第 3 方网站。它会在你的情况下完美地工作
回答by David
You can do this without using javascript at all... The :hoverCSS selector is similar to the onmouseoverjavascript event.
您可以完全不使用 javascript 来执行此操作... :hoverCSS 选择器类似于onmouseoverjavascript 事件。
<style>
a img.Large { display: none; }
a:hover img.Small { display: none }
a:hover img.Large { display: block; }
</style>
<a href="your link">
<img class="Small" src="Images/sheriffcarB4.jpg"
width="250" height="150"
alt="Photoshop Enhancement" />
<img class="Large" src="Images/sheriffcarcompare.jpg"
width="1100" height="350"
alt="Photoshop Enhancement" />
</a>
回答by Gadde
See this Fiddle
看到这个小提琴
Html
<a href="#">
<img class="actul" src="http://t2.gstatic.com/images?q=tbn:ANd9GcTjlz0eYHrzmEgWQ-xCtzyxIkA6YoZHpG0DnucD1syQXtTLyoZvuQ" width="400" height="300"
alt="picSmall" />
<img class="another" src="http://t3.gstatic.com/images?q=tbn:ANd9GcT7cjWFiYeCohI7xgGzgW60EHd-kEJyG3eNEdJJhnhp7RFT6o6m" width="600" height="350"
alt="picLarge" />
</a>
Css
a img.another { display: none; }
a:hover img.actul { display: none }
a:hover img.another { display: block; }
