html - 悬停元素在移动设备上始终处于事件状态

Question

我的问题如下。我对图像元素有悬停效果，但我想在移动 View 处于事件状态时保持悬停效果。

例如:

这是我在台式机和平板电脑上的图像:Without Hover

这是我将鼠标悬停在它上面时的样子:With Hover

因为手机在悬停效果方面对用户不友好，所以我希望当用户使用移动设备进入网站时已经显示悬停效果。

这是我的网站演示:https://wp.cedesca.com/

我希望你能帮助我，

提前致谢。

这是我的代码:

<div class="portfolio-image">
<div class="img-portfolio">
    <img src="https://wp.cedesca.com/media/cfgm-tes-480x320.jpg" alt="Técnico/a" en="" emergencias="" sanitarias="" (presencial)="" title="Técnico/a" data-pagespeed-url-hash="938249764" onload="pagespeed.CriticalImages.checkImageForCriticality(this);">
</div>
<div class="portfolio-hover" style="background-color:#cd6730;/* display: block; */">
    <div class="thumb-bg">
        <div class="mask-content">
            <h3>
                <a href="https://wp.cedesca.com/presencial/cfgm-tecnico-a-en-emergencias-sanitarias/" title="Técnico/a en Emergencias Sanitarias (Presencial)">Técnico/a en Emergencias Sanitarias (Presencial)</a>
            </h3>
            <div class="cat_portfolio">
                <a href="https://wp.cedesca.com/portfolio_category/grado-medio/">Grado Medio</a>, 
                <a href="https://wp.cedesca.com/portfolio_category/modalidad-presencial/">Modalidad Presencial</a>
            </div>
            <a href="https://wp.cedesca.com/presencial/cfgm-tecnico-a-en-emergencias-sanitarias/" title="Técnico/a en Emergencias Sanitarias (Presencial)" class="btn_zoom ">Ver más</a>
        </div>
    </div>
</div>

Answer 1

我检查了你的 .portfolio-hover 组件的 css 声明，你有:

.portfolio_container .wapper_portfolio .portfolio_column .style05 li:hover .portfolio-image .portfolio-hover,
.thim-widget-portfolio .wapper_portfolio .portfolio_column .style05 li:hover .portfolio-image .portfolio-hover {
    -webkit-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-transition: -webkit-transform .4s,opacity .1s;
    -moz-transition: -moz-transform .4s,opacity .1s;
    transition: transform .4s,opacity .1s
}

所以你可以添加一个媒体查询，就像你做悬停效果一样，只需删除 :hover 伪类:

@media only screen and (max-width: 600px) {
    .portfolio_container .wapper_portfolio .portfolio_column .style05 li .portfolio-image .portfolio-hover,
    .thim-widget-portfolio .wapper_portfolio .portfolio_column .style05 li .portfolio-image .portfolio-hover {
        -webkit-transform: rotateY(0);
        -ms-transform: rotateY(0);
        -o-transform: rotateY(0);
        transform: rotateY(0);
        -webkit-transition: -webkit-transform .4s,opacity .1s;
        -moz-transition: -moz-transform .4s,opacity .1s;
        transition: transform .4s,opacity .1s
    }
}

例如，这样 .portfolio-hover 将始终在 600 像素屏幕宽度下可见。