jquery - 鼠标悬停 Div 问题

Question

我知道这个问题有点容易问，但我花了 1 周时间才弄明白；我有一个网站 here ，在投资组合部分，有一个代码可以在鼠标悬停时将图像更改为描述...

我想让它倒置，描述 div 必须是我在该部分看到的第一个，当我将光标移到它上面时，我希望显示图像。

我想不通，是哪个 div 产生的，以及如何更改它来实现它。

<a href="img/plato.jpg" class="work-6-item image-link-2">
                       <img src="img/plato.jpg" class="img-responsive" alt="web tasarım uygulaması" />
                       <div class="work-6-overlay">
                          <div class="work-6-overlay-item">
                             <div class="work-6-des">
                                <span class="work-6-top-tit">PLATO FİLM</span>
                                <span class="work-6-line"></span>
                                <span class="work-6-sub-tit">Web Sitesi / İçerik Yönetimi</span>
                             </div>
                          </div>
                       </div>
                    </a>

Answer 1

我做的只是反转hover和normal状态 将其添加到 style.css 的末尾

.work-6-overlay {
    opacity: 1;
}
.work-6-overlay:hover {
    opacity: 0;
}
.work-6-des{
    opacity:1
}
.work-6-top-tit,.work-6-sub-tit, .work-6-line {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.work-6-overlay:hover .work-6-top-tit, .work-6-overlay:hover .work-6-sub-tit, .work-6-overlay:hover .work-6-line {
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -o-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
}