Question

通常我在这里寻求我刚刚开始的JavaScript类的帮助，但这是我正在研究的个人项目。我有代码（见下文），它会在鼠标悬停时增加照片的大小，并且工作正常。

问题是，我想不仅要显示更大的图像，而且对于其中一个，我还希望在鼠标悬停时完全显示不同的图像（是的，仍然是更大的尺寸！）。

这是我一直在使用但似乎无法使其正常工作（第一张图片是“之前”，第二张是之后/之后的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>

Answer 1

也许是这样的？

<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>

WORKING DEMO

在演示中等待一段时间，将鼠标悬停在图像上，以便更改图像src。这只是因为src是第三方网站。它将完美地适用于您的情况

Answer 2

您可以在不使用javascript的情况下执行此操作... :hover CSS选择器与onmouseover javascript事件类似。

<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>

Answer 3

请参阅此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; }

鼠标悬停时显示不同的较大照片

3 个答案: