将鼠标悬停在缩略图中会使用CSS

Question

我有2个div元素。文本内容的较大的一个（在顶部）和图像的缩略图的较小的一个（在底部）。

当我将图像悬停在缩略图div中时，我希望在文本内容的较大div上显示图像。

以下是没有悬停的屏幕截图：

在悬停期间（将图像悬停在缩略图上以在大多数div中变大）：

基本结构：

<div id="content">

 <p>Lorem ipsum...</p>
  <div id="thumbnail">
  <img src=""../>
</div>

</div><!--content-->

我该怎么做？

Answer 1

您可以使用sibiling选择器~悬停并执行以下操作：

＆＃13;

＆＃13;

.wrap {
  position: relative;
  border: 1px solid red;
  height: 350px;
}
.main {
  display: none;
  position: absolute;
  top: 0
}
.thumb {
  position: absolute;
  bottom: 0;
}
.thumb:hover ~ .main {
  display: block;
  position: absolute;
  bottom: 0;
}

＆＃13;

<div class="wrap">
  <!-- Thumbs -->
  <div class="thumb">
    <img src="http://placehold.it/250x100" />
  </div>
  <!-- Main image -->
  <div class="main">
    <img src="http://placehold.it/500x200" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

仅更新JS版本以延迟悬停

＆＃13;

＆＃13;

$(function() {
  $(".thumb").hover(function() {
      $(this).siblings(".main").fadeIn();
    },
    function() {
      $(this).siblings(".main").fadeOut();
    });
});

＆＃13;

.wrap {
  position: relative;
  border: 1px solid red;
  height: 350px;
}
.main {
  display: none;
  position: absolute;
  top: 0
}
.thumb {
  position: absolute;
  bottom: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrap">
  <!-- Thumbs -->
  <div class="thumb">
    <img src="http://placehold.it/100x100" />
  </div>
  <!-- Main image -->
  <div class="main">
    <img src="http://placehold.it/500x200" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

  

当我添加另一张高于第一张的图像时，我的问题是   关于适合的图像数量，因为通常是幻灯片   有ids的编号，以免发生冲突......

＆＃13;

＆＃13;

$(function() {
  $(".thumb img").hover(function() {
      var id = this.id.substring(this.id.lastIndexOf('-') + 1);
      $("#main-" + id).fadeIn();
    },
    function() {
      var id = this.id.substring(this.id.lastIndexOf('-') + 1);
      $("#main-" + id).fadeOut();
    });
});

＆＃13;

.wrap {
    position: relative;
    border: 1px solid red;
    height: 350px;
}
.main {
    position: absolute;
    top: 0
}
.main img {
    display: none;
}
.thumb-wrap {
    position: absolute;
    bottom: 0;
    width:100%;
}
.thumb {
    float:left;
    margin-right:1%
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrap">
    <!-- Thumbs -->
    <div class="thumb-wrap">
        <div class="thumb">
            <img id="thumb-01" src="http://placehold.it/100x100/f00" />
        </div>
        <div class="thumb">
            <img id="thumb-02" src="http://placehold.it/100x100/ff0" />
        </div>
    </div>
    <!-- Main image -->
    <div class="main">
        <img id="main-01" src="http://placehold.it/500x200/f00" />
    </div>
    <div class="main">
        <img id="main-02" src="http://placehold.it/500x200/ff0" />
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;