Question

我是所有这一切的新手，想知道当我将鼠标悬停在它上面时如何放大我的图像。

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

<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代码也不是我写的，也不知道如何更改它。

提前感谢您的帮助。

莎拉

Answer 1

你应该真正关注CSS或Javascript，否则徘徊是一项几乎不可能完成的任务。你可以做什么：

首先，删除范围并使用class标识thumbnail。

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

现在添加一些CSS，不用担心，这很简单。我们想要实现的是当您将鼠标悬停在缩略图上时，我们会显示较大的图像。所以在悬停时，我们隐藏缩略图并显示较大的图像。但由于我们隐藏了缩略图，我们无法将其悬停在其上，因此我们还希望继续显示较大的图像，直到我们的光标完全离开它为止。

<style type="text/css">
    .enlarge .thumbnail + img {
        display: none;
    }
    /* Hovering over the thumbnail, hide the thumbnail */
    .enlarge .thumbnail:hover {
        display: none;
    }
    /* Hovering over the thumbnail, show the large image and keep showing it when hovering over the image */
    .enlarge .thumbnail:hover + img,
    .enlarge .thumbnail + img:hover {
        display: block;
    }
</style>

.enlarge选择class="enlarge"的所有元素，.thumbnail对类thumbnail执行相同操作。 img选择每个图像元素，中间的+表示选择之前之后的任何元素，因此该行只是读取：select any {{1位于img元素内的.thumbnail元素之后的元素。 .enlarge似乎是不言自明的，但无论如何都是这样：一个:hover选择器被称为伪选择器并定义一个状态或:元素（元元素是你可以设计的元素，但不是真的在那里，比如meta和::before）。 Metas通常使用::after。还有其他伪状态，如::。只有在调用该状态时才会调用此处定义的样式。它是最简单的悬停方式！

但是，您也可以只使用一张图片来执行此操作：

:active

它简化了你的造型：

<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>与常规引号相比：”）。这可能会导致问题。其次，图片大小始终以像素为单位，除非在"中定义，因此请从宽度和高度中省略%。

px

.enlarge-image { width: 50px; height: auto; } .enlarge-image:hover { width: auto; }

Answer 2

你应该开始学习CSS。这是修复它的唯一方法。

＆＃13;

<head>
    <style type="text/css">
.picture{
  width : 150px;
  height : 100px;
 }
.picture:hover{
  width : 200px;
  height : 150px;
 }
    </style>
</head>
<ul class="enlarge">
    <li>
        <img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" class="picture"               alt="St John’s " />
    </li>
</ul>

＆＃13;

Answer 3

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

http://cssdemos.tupence.co.uk/image-popup.htm

http://jsfiddle.net/4AM3S/

Answer 4

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

这就是我所拥有的。我仍然无法发布一张它看起来像的照片。当你将鼠标悬停在它上面的最后一张照片闪烁时，这是我的代码还是屏幕的大小？

使用html悬停时放大图像

4 个答案: