Question

我在大图片左侧有一些缩略图（参见：http://i57.tinypic.com/fp4e47.png）

我正在尝试研究如何使用组合器，以便当用户在其中一个缩略图上悬停时，大图像会切换到相应的缩略图放大。

单独使用CSS是否可以实现？

由于

Answer 1

您可以使用background-position和width / height属性以及仅使用CSS的:hover伪选择器轻松实现此目的。

例如，如果您按如下方式定义CSS：

a.myLink {
    width: 88px;
    height: 88px;
    display: block;
    background: url('http://oi57.tinypic.com/fp4e47.jpg') no-repeat;
    background-position: -4px -10px;
}

a.myLink:hover {
    width: 429px;
    height: 329px;
    background-position: -197px -10px;
}

jsFiddle Demo

注意我是如何在悬停时移动背景图像的。请注意，为了指定<a>元素的大小，您需要使用display: block将其定义为块级元素。

Answer 2

如果结构允许，您可以在CSS3中使用带有wilde标记的src属性值和选择器~。

<强> DEMO

#gallerie {
  width:800px;
  margin:auto;
}
.thumb {
  margin:1em;
}
.thumb:nth-child(2n+2) {
  float:left;
}
.thumb:nth-child(odd) {
  clear:left;  
  float:left;
}
.hold  {
  overflow:hidden;
  width:500px;
  margin:1em;
  position:relative;
}
.hold img {
  max-width:100%;
}
.hold img + img { 
  /* because we keep first image in the flow
   to size .hold and show something*/
  display:none;
  position:absolute;
  top:0;
  left:0;
}
[src*="nature/1"]:hover ~ .hold img[src*="nature/1"],
[src*="nature/2"]:hover ~ .hold img[src*="nature/2"] ,
[src*="nature/3"]:hover ~ .hold img[src*="nature/3"] ,
[src*="nature/4"]:hover ~ .hold img[src*="nature/4"] ,
[src*="nature/5"]:hover ~ .hold img[src*="nature/5"] ,
[src*="nature/6"]:hover ~ .hold img[src*="nature/6"] {
  display:block;
  z-index:1;
}

这个结构

<div id="gallerie">
 <!-- do notwrap .thumb to use it to access to .hold via CSS -->
<img class="thumb" src="http://lorempixel.com/100/80/nature/1" />
<img class="thumb" src="http://lorempixel.com/100/80/nature/2" />
<img class="thumb" src="http://lorempixel.com/100/80/nature/3" />
<img class="thumb" src="http://lorempixel.com/100/80/nature/4" />
<img class="thumb" src="http://lorempixel.com/100/80/nature/5" />
<img class="thumb" src="http://lorempixel.com/100/80/nature/6" />
<div class="hold">
  <img src="http://lorempixel.com/1000/800/nature/1" />
<img src="http://lorempixel.com/1000/800/nature/2" />
<img src="http://lorempixel.com/1000/800/nature/3" />
<img src="http://lorempixel.com/1000/800/nature/4" />
<img src="http://lorempixel.com/1000/800/nature/5" />
<img src="http://lorempixel.com/1000/800/nature/6" />
  </div>
</div>

使用组合器交换图像

2 个答案: