gpt4 book ai didi

jquery - 鼠标悬停 Div 问题

转载 作者:行者123 更新时间:2023-11-28 03:04:35 26 4
gpt4 key购买 nike

我知道这个问题有点容易问,但我花了 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>

最佳答案

我做的只是反转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);
}

关于jquery - 鼠标悬停 Div 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46005414/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com