在另一个div悬停时显示div的问题

Question

我正试图让我的描述显示我何时悬停在figcaption上。我尝试通过改变类的不透明度来实现这个：

.hoverForDesc:hover >#product1

我在SE上发现但当我徘徊时它根本没有工作现在没有任何反应，我不知道问题是什么。

<figure class="productCard">
  <div class="test_layer" id="product1">
    Description
  </div>
  <img src="http://www.altpress.com/images/uploads/news/Hello_Kitty.jpg" alt="product1" />
  <figcaption class="hoverForDesc">
    <div class="productText">
      <h3>Product name</h3>
      <p>subtitle <i class="fa fa-info-circle" aria-hidden="true"></i></p>
    </div>
    <div class="price">
      €1699,-
    </div>
  </figcaption>
</figure>

CSS

#product1{
  opacity: 0.0;
}

.hoverForDesc:hover >#product1{
  opacity: 1.0;
}

JSFiddle