时间戳

首页 > 解决方案 > 在移动设备上悬停图像

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;
}

标签： htmlcssmobilehovercargo

解决方案

http://www.w3schools.com/cssref/sel_active.asp也提到了这一点；:active如果您在悬停之前提及选择器，您可以实现您想要的（点击移动设备，悬停在桌面上）:selector

推荐阅读