Question

我正在尝试显示图像，当相应的缩略图仅使用css悬停并且我遇到逻辑问题并且不知道它是否可能时。如果绝对必要，我可以在javascript中完成。这是我最近的尝试。

<div id='img-container' class='grd12'>

    <img id='img1' class='slide-images' src='images/10086115704_15ab56a165_o.jpg' alt='1'>
    <img id='img2' class='slide-images' src='images/9917938624_0a8778f8b1_o.jpg' alt='2'>
    <img id='img3' class='slide-images' src='images/PIA18847.jpg' alt='3'>
    <img id='img4' class='slide-images' src='images/sun-large.jpg' alt='4'>

</div>
<!-- <div class='grd3 thumbnail'>-->
     <img id='thumb1' class='grd3 thumbnail' src='images/10086115704_e36e457d2b_q.jpg' alt='##'>
<!-- </div>-->
<!-- <div class='grd3 thumbnail'>-->
     <img id='thumb2' class='grd3 thumbnail' src='images/9917938624_1ed12deaa2_q.jpg' alt='##'>
<!-- </div>
<div class='grd3 thumbnail'>-->
    <img id='thumb3' class='grd3 thumbnail' src='images/PIA18847.jpg' alt='##'>
<!--</div>
<div class='grd3 thumbnail'>-->
   <img id='thumb4' class='grd3 thumbnail' src='images/sun-large.jpg' alt='##'>
<!--</div>-->

和CSS

#img-container{
    position:relative;
    top:0px;
    left:0px;
    height:950px;
}
.slide-images{
    position:absolute;
    top:0px;
    left:0px;
 }
 .thumbnail > img{
    margin-left:auto;
    margin-right:auto;
    display: inherit;
}
img#thumb4:hover ~ #img4>#image4{
    display:none;
}

Answer 1

我相信单独使用CSS是可能的，但它不是很容易扩展，并且最终可能更容易使用Javascript更合适。例如：

img#thumb1:hover ~ #img4>#image4{
    display:none;
}

此处的选择器不正确。通用兄弟选择器仅在第一次匹配后选择元素。在这种情况下，您的图像缩略图在图像之后，但此选择器正在图像拇指后查找图像。这与你所拥有的完全相反。 CSS中没有'兄弟姐妹'选择器。

一个更简单的解决方案，而不是摆弄CSS选择器，只是将每个缩略图绑定到一个单击事件，每次更改单个图像标记的源（或者，滚动/淡化，无论你做什么动画）寻找）。这样，你节省了标记，不需要担心定位那么多，并且可以动态生成图像显示。

例如，要获取图像的ID，您可以将单击事件绑定到每个缩略图，然后获取可以存储在data属性中的图像ID：

$('.thumbnail').on('hover', function() { var activeImg = $(this).data('imgid'); // From here, set the main image to have the associated image source }

Answer 2

这很有可能只用CSS来实现。 HTML的布局是需要改变的。在这个例子中：

每个缩略图和完整尺寸的图像都放在div容器中
使用opacity: 0;
当div容器悬停时，全尺寸图像将被赋予opacity: 1并且由于过渡而将淡入
z-index: 1将全尺寸图片保留在缩略图上方

完整示例

＆＃13;

.item {
  float: left;
  position: relative;
}
img {
  display: block;
  cursor: pointer;
  margin: 5px;
}
.fullsize {
  position: absolute;
  opacity: 0;
  transition: opacity 0.6s;
  z-index: 1;
  top: 0;
  left: 0;
  pointer-events: none;
}
.item:hover .fullsize {
  opacity: 1;
}

＆＃13;

<div class="item">

  <img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
  <img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>

<div class="item">

  <img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
  <img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>

<div class="item">

  <img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
  <img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>

<div class="item">

  <img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
  <img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>

<div class="item">

  <img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
  <img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>

<div class="item">

  <img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
  <img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>

＆＃13;

当缩略图悬停在上方时，CSS显示元素

2 个答案:

完整示例