Question

我知道这是一个有点容易提出的问题，但我无法弄清楚这一周;我有一个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

在没有看到实际代码的情况下很难确定，但看起来你想要的只是简单地重新排序每个div中的li元素。

<div class="service-1-up effect-up">
  <ul>
    <li>
      <div class="h-center">
        <div class="v-center">
          <h3 class="title-after"><a class="txt-h">GRAFİK TASARIM</a></h3>
          <h4 class="des">Basılı ya da online tüm grafik tasarım ihtiyaçlarınızı, modern tasarım trendlerine uygun ve işiniz için en verimli doğrultuda planlıyor, tasarlıyor ve teslim ediyoruz.</h4>
          <p class="number">01</p>
        </div>
      </div>
    </li>
    <li>
      <div class="h-center">
        <div class="v-center">
          <img src="img/icon/tablet.png" alt="grafik tasarım">
          <h2 class="title">GRAFİK TASARIM</h2>
        </div>
      </div>
    </li>
  </ul>
</div>

Answer 2

我所做的只是扭转悬停和正常状态在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);
}

鼠标悬停Div问题

2 个答案: