手机上的悬停图像

Question

我的网站上有一个用 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;
}

Answer 1

http://www.w3schools.com/cssref/sel_active.asp 中也提到了这一点；如果你在悬停 :selector

之前提到 :active 选择器，你可以实现你想要的（点击移动设备，悬停在桌面上）

Answer 2

visibility: hidden; 将隐藏图像，除非您更具体地取消隐藏它们。由于您希望图像同时出现在移动设备和桌面设备上（但样式不同），请删除 visibility 属性，并使用 media query 在桌面设备和移动设备之间更改样式。

手机上的悬停图像

Hover Images on Mobile

html

css

mobile

cargo

hover