javascript - 无需将鼠标悬停在 WordPress 中的 Image Accordion Gallery 上即可显示标题
问题描述
这是我的网站。
https://developer.blink-eye.com/prifer/index.php/en/index/
如果您向下滚动到“我们的全部内容”部分,您会找到一个画廊。
我的问题是我在我的网站上使用 Image Accordion Plugin。默认情况下,它显示标题和解密,但悬停在每个垂直部分上。我希望它只显示没有悬停的标题,而悬停时的标题和描述就像现在显示的那样。
我试图通过针对不同的类使用外部 css 来实现这一点,但标题没有出现。在某些时候,如果它们出现,它们并没有对齐。
我想这是我们可以用 JavaScript 做的事情,但我不是写任何代码的专家,因为我现在已经厌倦了。
现在寻求专家的帮助。
提前致谢。
JS
var ImageAccordion = function($scope, $) {
var $imageAccordion = $scope.find(".eael-img-accordion").eq(0),
$id =
$imageAccordion.data("img-accordion-id") !== undefined
? $imageAccordion.data("img-accordion-id")
: "",
$type =
$imageAccordion.data("img-accordion-type") !== undefined
? $imageAccordion.data("img-accordion-type")
: "";
if ("on-click" === $type) {
$("#eael-img-accordion-" + $id + " a").on("click", function(e) {
if ($(this).hasClass("overlay-active") == false) {
e.preventDefault();
}
$("#eael-img-accordion-" + $id + " a").css("flex", "1");
$(this)
.find(".overlay")
.parent("a")
.addClass("overlay-active");
$("#eael-img-accordion-" + $id + " a")
.find(".overlay-inner")
.removeClass("overlay-inner-show");
$(this)
.find(".overlay-inner")
.addClass("overlay-inner-show");
$(this).css("flex", "3");
});
$("#eael-img-accordion-" + $id + " a").on("blur", function(e) {
$("#eael-img-accordion-" + $id + " a").css("flex", "1");
$("#eael-img-accordion-" + $id + " a")
.find(".overlay-inner")
.removeClass("overlay-inner-show");
$(this)
.find(".overlay")
.parent("a")
.removeClass("overlay-active");
});
}
};
jQuery(window).on("elementor/frontend/init", function() {
elementorFrontend.hooks.addAction(
"frontend/element_ready/eael-image-accordion.default",
ImageAccordion
);
});
CSS
/*------------------------------*/
/* 34. Image accordion
/*------------------------------*/
.eael-img-accordion {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 50vh;
}
.eael-img-accordion a {
position: relative;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
text-decoration: none;
color: #fff;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-webkit-transition: -webkit-box-flex .4s, -webkit-flex .4s;
transition: -webkit-box-flex .4s, -webkit-flex .4s;
-o-transition: flex .4s;
transition: flex .4s;
transition: flex .4s, -webkit-box-flex .4s, -webkit-flex .4s, -ms-flex .4s;
}
.eael-grow-accordion {
-webkit-box-flex: 3;
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
}
.eael-img-accordion .overlay {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0 10px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition: background-color .4s;
-o-transition: background-color .4s;
transition: background-color .4s;
}
.eael-img-accordion .overlay .overlay-inner {
z-index: 1;
}
.eael-img-accordion a:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.eael-img-accordion .overlay-inner * {
visibility: hidden;
opacity: 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.eael-img-accordion .overlay h2 {
color: #fff;
-webkit-transform: translate3d(0, -60px, 0);
transform: translate3d(0, -60px, 0);
}
.eael-img-accordion .overlay p {
color: #fff;
-webkit-transform: translate3d(0, 60px, 0);
transform: translate3d(0, 60px, 0);
}
.eael-img-accordion .overlay-inner-show * {
opacity: 1;
visibility: visible;
-webkit-transform: none !important;
-ms-transform: none !important;
transform: none !important;
-webkit-transition: all .3s .3s;
-o-transition: all .3s .3s;
transition: all .3s .3s;
}
@media screen and (max-width: 800px) {
.eael-img-accordion {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.eael-img-accordion a:hover {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.eael-img-accordion a:hover .overlay {
background-color: transparent;
}
}
解决方案
使用这个 CSS
.eael-img-accordion a:hover .overlay-inner div:nth-child(2) {
display: none;
}
.eael-img-accordion .overlay-inner * {
visibility: visible !important;
opacity: 1 !important;
}
.eael-img-accordion .overlay-inner h2 {
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
}
注意:如果您不想要那种效果,请在悬停时调整您的标题(向上 - 向下)
推荐阅读
- python - 用 kivy 播放视频:模块 'ffmpeg' 没有属性 'FFVideo'
- cordova - 创建项目后构建和模拟有什么区别
- json - Beautifulsoup find 方法返回不可下标的对象
- python - 尝试从 DotNet Core MVC 项目执行 python 进程时权限被拒绝
- ocaml - OCaml 函子排序
- node.js - Heroku Nodejs vs Vercel Nodejs
- c# - 在同一个地方打印数字
- .net-core - .NET Core 运行状况检查:找不到所需的服务
- vba - 基于另一列值的 VBA Subtotal(9,"range")
- c# - 如何从 Web API 调用 ASP.NET Core Web MVC