如何在悬停时，在不同的元素中显示画廊的第一个图像

Question

我已经坚持了一段时间，无法找到帮助我的任何解决方案。

要了解正在发生的事情：我有一个li包含a元素和一个图库div，它将显示在#thumb中点击a。 （我现在从代码中删除了这部分）

我希望在悬停a时可以看到图库的第一张图片。如果图库中没有内容，我希望不会发生任何事情。

如何在普通的js中实现这一目标？我走得很远，但是我错过了js的知识（因此我估计所有的变量都是:-)。非常感谢帮助。

图库会自动生成，因此图库的数量取决于通过CMS添加的图库数量。\ n＆＃39; s

JS Fiddle here

＆＃13;

＆＃13;

var hoverThis = document.getElementsByClassName("project-item");
var galleryId = document.querySelector(".open-gallery").getAttribute("href");
var getFirstImg = document.querySelector(galleryId).firstElementChild.getAttribute("href");
var thumb = document.getElementById('thumb');
var content = getFirstImg.includes("http");


if (content == true) {

  hoverThis.addEventListener("mouseover", function(e) {

    e.target.thumb.innerHTML = '<img src="' + getFirstImg + '" class="thumb-img">"';

  }, false);

  hoverThis.addEventListener("mouseout", function(e) {

    e.target.thumb.innerHTML = '';

  }, false);

} else {
  console.log('empty')
};

＆＃13;

li {
  list-style: none;
}

#thumb {
  height: 300px;
  width: 300px;
  background: beige;
}

.hidden {
  display: none
}

img {
  height 200px;
  width: 200px;
}

＆＃13;

<ul>
  <li class='project-item'>
    <a href="#gallery-1" class="open-gallery">
      <span>01.11.17</span>
    </a>
    <div id="gallery-1" class="hidden">
      <a href="http://placehold.it/150x150">Image 3</a>
      <a href="g1-second-image">Image 2</a>
    </div>
  </li>

  <li class='project-item'>
    <a href="#gallery-2" class="open-gallery">
      <span>02.11.17</span>
    </a>
    <div id="gallery-2" class="hidden">
      <!-- empty gallery -->
    </div>
  </li>

  <li class='project-item'>
    <a href="#gallery-3" class="open-gallery">
      <span>03.11.17</span>
    </a>
    <div id="gallery-3" class="hidden">
      <a href="http://placehold.it/200x20
      0">Image 1</a>
      <a href="g3-second-image">Image 2</a>
      <a href="g3-third-image">Image 3</a>
    </div>
  </li>
</ul>

<div class="thumb-wrap">
  <figure id="thumb">
  </figure>
</div>

＆＃13;

＆＃13;

＆＃13;