Html 在手机上悬停图像

我的网站上有一个用CARGO Collective构建的悬停图像功能。我在CSS中添加了悬停功能，效果很好，但是这些悬停图像不会出现在手机上。我的问题是，我如何才能添加到CSS中，使它们可以在移动设备上点击图像链接，但仍停留在桌面版本上

以下是网站上出现悬停CSS的位置：

.hover-title {
    display: inline;
    pointer-events: auto;
    cursor: pointer;
}
.hover-title {
color: #FFB000;
}

body:not(.mobile) .hover-title:hover + .hover-image {
    visibility: visible;
    pointer-events: none;
}

.hover-image {
    visibility: hidden;
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:5;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;

/* Change width and height to scale images */
    width: 90vw;
    height: 90vh;
}

.hover-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0;
}

这也在,；如果您在hover:selector之前提到：active selector，那么您可以在手机上点击鼠标，在桌面上悬停，实现您想要的功能；将隐藏图像，除非您以更高的特定性取消隐藏它们。由于您希望图像同时显示在移动设备和桌面上，但样式不同，因此请删除可见性属性，并使用更改桌面和移动设备之间的样式