css 怎么悬停换图片_简单CSS悬停图片库

css 怎么悬停换图片

There are many ways to create image galleries: JavaScript, PHP, Flash and more. But all that is required, in most cases, is some simple CSS combined with semantic markup.

创建图像库的方法有很多： JavaScript ， PHP ，Flash等。 但是，在大多数情况下，所需要做的就是将一些简单的CSS与语义标记结合起来。

To complete this exercise, you’ll need three thumbnail photographic images, ideally all the same size, and three matching large versions of those same images. For clarity, save the large versions of the images as subject.jpg and the small versions as subject_thumb.jpg.

要完成此练习，您将需要三张缩略图图像，理想情况下它们的大小均应相同，并且需要三个匹配的大型图像。 为了清楚起见，将图像的大版本另存为subject.jpg ，将小版本另存为subject_thumb.jpg 。

Once you have your content, the question is what markup makes the most semantic sense to wrap around it. What we desire is a set of interactive thumbnail images that reveal larger versions of themselves, including an explanation of the picture's context and meaning. Here, the incredibly useful (and unappreciated) definition list comes to our aid: we are, at heart, talking about a series of terms (which could be words, images, links, or anything else) that are expanded upon with a definition.

拥有内容后，问题是将哪种标记最有意义地包裹起来。 我们需要的是一组交互式缩略图，这些缩略图可以显示自己的较大版本，包括对图片背景和含义的解释。 在这里，非常有用(且不为人所知)的定义列表对我们有帮助：我们从本质上讲，是在讨论一系列带有定义扩展的术语(可能是单词，图像，链接或其他任何东西)。

The basic markup is fairly straightforward:

基本标记非常简单：

<dl id="simple-gallery">
	<dt tabindex="1">
		<img src="london-thumb.jpg" alt>
	<dd>
		<img src="london.jpg" alt>
	<dt tabindex="2">
		<img src="paris-thumb.jpg" alt>
	<dd>
		<img src="paris.jpg" alt>
	<dt tabindex="3">
		<img src="san-francisco-thumb.jpg" alt>
	<dd>
		<img src="san-francisco.jpg" alt>
</dl>

(Note that for the purpose of this exercise I am assuming that every thumbnail is the same size, so I could put their width and height as part of a declaration:

(请注意，出于此练习的目的，我假设每个缩略图的大小均相同，因此我可以将其width和height作为声明的一部分：

dl#simple-gallery dt img { }

If the thumbnails were all different sizes, you would put the width and height as separate inline styles for each image, as you normally would for the large images. I have left the alt values for the images blank with markup shortcuts for the sake of clarity.

如果缩略图的大小均不同，则将大图片的width和height分别设置为每个图像的内联样式。 为了清楚起见，我使用标记快捷方式将图像的alt值留为空白。

On viewing the web page in our browser we’re immediately confronted with several problems. The first is that our large images are visible, and we only want them to appear when the user hovers over a thumbnail image.

在浏览器中查看网页时，我们立即遇到了一些问题。 首先是我们的大图像可见，我们只希望它们在用户将鼠标悬停在缩略图上时显示。

There are many CSS properties that can be used to make elements on a web page “disappear”: display, visibility, pushing things off the screen with margin or left, and more. We will use opacity:

有许多CSS属性可用于使网页上的元素“消失” ： display ， visibility ，以margin或left推动内容离开屏幕等。 我们将使用opacity ：

dl#simple-gallery dd {
	opacity: 0;
}

That hides our large images, but preserves the space they take on-screen. We’ll get around this by positioning the <dd> elements absolutely:

这隐藏了我们的大图像，但保留了它们在屏幕上占用的空间。 我们将通过绝对定位<dd>元素来解决此问题：

dl#simple-gallery dd {
	opacity: 0;
	position: absolute;
}

Using absolute positioning on elements takes them out of the “flow” of the document: the web page acts like the definition declarations are no longer there, and collapses the remaining structure of our document. (The <dd> elements and the images they contain are still present, of course, simply hidden by our opacity: 0 rule. You could see where the images are by removing or commenting out that part of the style declaration.)

在元素上使用绝对定位会使它们脱离文档的“流程”：网页的行为就像定义声明不再存在，并折叠了文档的其余结构。 (当然， <dd>元素及其包含的图像仍然存在，只是被我们的opacity: 0规则隐藏了。您可以通过删除或注释掉样式声明的那一部分来查看图像的位置。)

position: absolute is very useful, but very dangerous – if not used carefully, it leads to positioning every element on the page absolutely, due to designer’s misplaced desire for “pixel-perfect layout” and the aforementioned collapse due to the removal of absolutely positioned elements from the flow of the document. position: absolute should, as a general rule, be avoided unless it is absolutely required – and when used, you should know why you are using it, rather than “it just works this way”.

position: absolute非常有用，但也很危险–如果不谨慎使用，它会导致页面上每个元素都绝对定位，这是由于设计师对“像素完美布局”的错位以及由于移除绝对位置而导致的上述崩溃文档流中的元素。 position: absolute除非绝对必要，否则应避免使用绝对原则-使用时，您应该知道为什么使用它，而不是“它只是以这种方式起作用”。

In this case, position: absolute is used for an eminently logical reason: we want all of our large images to appear in the same location. Right now, they are not (again, turn off opacity: 0 temporarily to see where they are). In addition, we want the position of the large images to be measured in respect to their relation to the definition list as a whole. This is a two-step process. First, some CSS for the definition list itself:

在这种情况下，出于明显的逻辑原因使用了position: absolute ：我们希望所有大图像都出现在同一位置。 现在，它们还没有(再次关闭opacity: 0暂时关闭opacity: 0以查看它们的位置)。 另外，我们希望相对于整个定义列表来测量大图像的位置。 这是一个两步过程。 首先，定义列表本身的一些CSS：

dl#simple-gallery {
	position: relative;
}

The reason for this line is a simple rule: absolutely positioned elements position themselves against the origin of the body (i.e. the top left corner of the web page), unless they are within another absolutely positioned or relatively positioned element.

这条线的原因是一个简单的规则： 绝对定位的元素将自身相对于主体的原点(即网页的左上角)定位，除非它们位于另一个绝对定位或相对定位的元素内。

In essence, we’ve told the absolutely positioned <dd> elements to measure their position against the definition list, rather than the body. We can see this by once more temporarily commenting out the visibility of the <dd> elements and adding more CSS to the style declaration:

本质上，我们已经告诉绝对定位的<dd>元素以定义列表 (而不是主体)为基准来衡量其位置。 通过再次临时注释<dd>元素的可见性并将更多CSS添加到样式声明中，我们可以看到这一点：

dl#simple-gallery dd {
	/* opacity: 0; */
	position: absolute;
	top: 20px;
	left: 200px;
}

Naturally the numbers for left and top are guesses; you should feel free to adjust them to suit your particular design before turning visibility: hidden back on.

自然， left和top的数字是猜测； 您应该在调整visibility: hidden之前随意调整它们以适合您的特定设计visibility: hidden重新visibility: hidden 。

The penultimate step is to make the <dd> elements appear only when we are hovering over the thumbnail images. Looking at our markup, we can see that each <dd> element is immediately preceded by a <dt>. We also recall that :hover can be applied to any element, not. Ergo, the solution is a combination that employs an adjacent selector:

倒数第二步是使<dd>元素仅在我们将鼠标悬停在缩略图上时出现。 查看我们的标记，我们可以看到每个<dd>元素紧跟在<dt> 。 我们还记得:hover不能应用于任何元素。 因此，解决方案是采用相邻选择器的组合：

dl#simple-gallery dt:hover + dd, dl#simple-gallery dt:focus + dd { 
		opacity: 1;
}

The CSS interacts with our HTML markup to create the effect of the large images appearing when the mouse is moved over the thumbnail images, touched on a mobile device, or when the TAB key is pressed (due to the use of tabindex in the markup, as we also want our page to be accessible.

CSS与我们HTML标记进行交互，以创建以下效果：当鼠标移到缩略图上，在移动设备上触摸或按下TAB键时(由于在标记中使用了tabindex ，因为我们也希望我们的页面可以访问 。

This solution is a good one, with just one remaining problem: you can make the large images visible by moving your mouse or touching to the right of the thumbnail images, where the <dt> is still active. This is due to the fact that <dt> is a block tag, and therefore stretches all the way across the page by default. But if it’s a block tag, we can apply width to it. Assuming that your thumbnail images are all 75 pixels wide:

此解决方案是一个很好的解决方案，仅存在一个问题：您可以通过移动鼠标或触摸缩略图图像的右侧( <dt>仍处于活动状态)来使大图像可见。 这是由于<dt>是一个block标记 ，因此默认情况下一直延伸到整个页面。 但是，如果它是一个块标记，我们可以对其应用width 。 假设您的缩略图全都是75像素宽：

dl#simple-gallery dt {
	width: 75px;
}

The complete CSS code:

完整CSS代码：

dl#simple-gallery { 
	position: relative;
}
dl#simple-gallery dt {
	width: 75px;
}
dl#simple-gallery dd {
	opacity: 0;
	position: absolute;
	top: 20px;
	left: 200px;
}
dl#simple-gallery dt:hover + dd, dl#simple-gallery dt:focus + dd {
		opacity: 1;
}

建议进一步的工作 (Suggested further work)

Recreate the version of this effect shown at the top of this article: add a background-color to the definition list, transition the appearance of the large images, and add a center-aligned caption to the large image. Advanced variations would include making the gallery responsive and one large image appear by default when the gallery loads. Note that none of these additions should require adding any extra markup to the HTML code.

重新创建此效果的版本，如本文顶部所示：在定义列表中添加background-color ，过渡大图像的外观，并向大图像添加居中对齐的标题。 高级变体包括使图库具有响应性，并且在加载图库时默认情况下会显示一个大图像。 请注意，这些添加均不要求在HTML代码中添加任何额外的标记。

翻译自: https://thenewcode.com/58/Simple-CSS-Hover-Image-Gallery

css 怎么悬停换图片