使用html在悬停时生成大图像

我对这一切都不熟悉，我想知道当我在上面悬停时如何放大我的图像

到目前为止，我已经试过了

<ul class="enlarge">
  <li>
    <img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150px" height="100px" alt="St John's" />
    <span>
      <img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/03/St-Johns-Pop-up.jpg" />
      <br />St John's, Baldock
    </span>
  </li>

圣约翰，鲍多克

所有这一切只会生成一个小图像和一个大图像。我不知道如何使用css，所以如果你回应，请用HTML代码

另外，下面文本框中出现的HTML代码不是我写的，不知道如何更改

提前谢谢你的帮助

---

Sarah

你应该认真研究

CSS

或

Javascript

，否则悬停几乎是不可能完成的任务。以下是您可以做的：

首先，删除span并使用

类

识别

缩略图

<ul class="enlarge">
    <li>
        <img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150px" height="100px" alt="St John’s" class="thumbnail" />
        <img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/03/St-Johns-Pop-up.jpg" class="large-image" />
        <br />St John’s, Baldock
    </li>
</ul>

它大大简化了您的造型：

<style type="text/css">
    .enlarge-image {
        width: 150px;
        height: auto;
    }
    /* Show full size on hover */
    .enlarge-image:hover {
        /* This can be any size you want it to be as well. */
        width: auto;
    }
</style>

圣约翰、鲍多克

你应该开始学习css。这是解决问题的唯一办法

.图片{
宽度：150px；
高度：100px；
}
.图片：悬停{
宽度：200px；
高度：150像素；
}

---

想出来了，但现在它看起来像垃圾。任何人都知道如何隐藏其他照片时，我悬停和放大一张照片，因为他们只是在大照片周围移动

---

这就是我所拥有的。我仍然不能发布它看起来像什么的照片。还有最后一张照片，当你停在上面时，它会闪烁，这是我的代码还是屏幕的大小

你不能只用htmlTry来做，比如上面的链接不起作用，我以前也试过下面的链接，这给了我一个小而大的印象。我知道我做错了什么，但我想不出来。当我使用Jari的代码时，它只适用于一张图片，但当我将它应用于我的3张图片时，我只得到一张悬停图片，其余的都是非常大的图片。对不起，这让我很痛苦，但这让我快发疯了！我如何运行此程序，以便在一行中有3张图片？我试着修改悬停的大小，然后添加不同的图片，但我一直在悬停中获取第一张图片，然后在大图片中获取其余的图片。我真的不太明白，但是你是否将class='图片'添加到其他图片中？我只是复制并粘贴了你给我的图片，更改了悬停的大小并重复添加新照片。我得到了一张悬停图片，然后另外两张大了。这是网页。奇怪，因为我可以用over函数添加多个图像。你能给我发多张图片的代码吗？

<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150px" height="100px" alt="St John’s" class="enlarge-image" />
<br />St John’s, Baldock

<style type="text/css">
    .enlarge-image {
        width: 150px;
        height: auto;
    }
    /* Show full size on hover */
    .enlarge-image:hover {
        /* This can be any size you want it to be as well. */
        width: auto;
    }
</style>

 Above answer  are correct. I am providing you some link which will help you.