启用：在触摸屏环境中悬停效果

问题描述：

当鼠标悬停在图像上时，可以看到4个图标出现，图像放大后.my-caption的背景变暗。我已经在移动设备上测试过这个功能，但在台式机上效果不佳。当我点击图像时，图标下的链接在悬停效果的同时被访问。我想在触摸屏设备（包括Android和iOS）上实现这种友好。

我的目标：

当用户点击图片，悬停效果被激活（图标显示，图像缩放和黑暗的BG）。如果用户再次点击图像或点击图像外的其他位置，悬停效果将被停用（恢复到正常状态）。
只有在用户点击图标时才能访问图标下方的链接（辅助点按）。

我该如何使用CSS或简单JS实现这一目标？谢谢你的帮助。

ps。我必须记得Mary Lou用于这种令人敬畏的悬停效果。

答

试试这个：

HTML：

<section class="my-work-area"> 
    <div class="my-item"> 
    <img src="http://i.imgur.com/PAj4Ky9.jpg"> 
    <div class="my-caption text-center"> 
     <figure class="effect-hera"> 
     <figcaption> 
      <p> 
      <a href="http://www.google.com" target="_blank"><i class="fa fa-moon-o"></i></a> 
      <a href="http://www.yahoo.com" target="_blank"><i class="fa fa-smile-o"></i></a> 
      <a href="http://www.apple.com" target="_blank"><i class="fa fa-star-o"></i></a> 
      <a href="http://www.microsoft.com" target="_blank"><i class="fa fa-sun-o"></i></a> 
      </p> 
     </figcaption> 
     </figure> 
    </div> 
    </div> 
</section>

CSS：

.my-work-area { 
    width: 100%; 
    max-width: 420px; 
    height: auto; 
} 

.my-item { 
    overflow: hidden; 
    position: relative; 
} 

.my-item img { 
    width: 100%; 
    -webkit-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
} 

.my-item.active img, 
.my-item.active img { 
    -webkit-transform: scale(1.2); 
    transform: scale(1.2); 
} 

.my-item.active .my-caption { 
    background: rgba(0, 0, 0, 0.75); 
    visibility: visible; 
} 

.my-item .my-caption { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    -webkit-transition: all 0.25s ease-in-out 0s; 
    transition: all 0.25s ease-in-out 0s; 
    visibility: hidden; 
} 

.my-item .my-caption figure { 
    position: relative; 
    float: left; 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
} 

.my-item .my-caption figure figcaption { 
    padding: 2em; 
    font-size: 3em; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 

.my-item .my-caption figure figcaption::before, 
.my-item .my-caption figure figcaption::after { 
    pointer-events: none; 
} 

.my-item .my-caption figure figcaption, 
.my-item .my-caption figure figcaption > a { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

.my-item .my-caption figure figcaption > a { 
    z-index: 1000; 
    text-indent: 200%; 
    white-space: nowrap; 
    font-size: 0; 
    opacity: 0; 
} 

.my-item .my-caption figure p { 
    margin: 0; 
    letter-spacing: 2px; 
    font-size: 60%; 
} 

figure.effect-hera { 
    background: transparent; 
} 

figure.effect-hera p { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transition: opacity 0.35s, transform 0.35s; 
    transition: opacity 0.35s, transform 0.35s; 
    -webkit-transform: translate3d(-50%,-50%,0); 
    transform: translate3d(-50%,-50%,0); 
    -webkit-transform-origin: 50%; 
    transform-origin: 50%; 
} 

figure.effect-hera figcaption::before { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    content: ''; 
    opacity: 0; 
    -webkit-transition: opacity 0.35s, transform 0.35s; 
    transition: opacity 0.35s, transform 0.35s; 
    -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1); 
    transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1); 
    -webkit-transform-origin: 50%; 
    transform-origin: 50%; 
} 

figure.effect-hera p { 
    width: 100px; 
    text-transform: none; 
    line-height: 1.8; 
} 

figure.effect-hera p a { 
    color: linen; 
} 

figure.effect-hera p a:hover { 
    color: gold; 
} 

figure.effect-hera p a i { 
    font-size: 1.2em; 
} 

figure.effect-hera p a i { 
    opacity: 0; 
    -webkit-transition: opacity 0.35s, transform 0.35s; 
    transition: opacity 0.35s, transform 0.35s; 
} 

figure.effect-hera p a:first-child i { 
    -webkit-transform: translate3d(-60px,-60px,0); 
    transform: translate3d(-60px,-60px,0); 
} 

figure.effect-hera p a:nth-child(2) i { 
    -webkit-transform: translate3d(60px,-60px,0); 
    transform: translate3d(60px,-60px,0); 
} 

figure.effect-hera p a:nth-child(3) i { 
    -webkit-transform: translate3d(-60px,60px,0); 
    transform: translate3d(-60px,60px,0); 
} 

figure.effect-hera p a:nth-child(4) i { 
    -webkit-transform: translate3d(60px,60px,0); 
    transform: translate3d(60px,60px,0); 
} 

.my-item.active figure.effect-hera figcaption::before { 
    opacity: 1; 
    -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1); 
    transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1); 
} 

.my-item.active figure.effect-hera p i:empty { 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
    opacity: 1; 
}

的jQuery：

$('.my-item').on('click', function() { 
    $('.my-item').removeClass('active'); 
    $(this).addClass('active'); 
}); 

$(document).on("click", function(e) { 
    if (!($(e.target).is('.my-item') || $($(e.target).parents('.my-item')).is('.my-item'))){ 
    $('.my-item').removeClass('active'); 
    } 
});

演示：https://jsfiddle.net/gwuuzmah/5/

即使这个工作，它需要用户使用JavaScript，而通过'：focus'伪类可以用纯CSS实现解决方案。 – Roberrrt

谢谢你的回复*。到目前为止，我决定采用这种方法，但仍需要jQuery的一些帮助。实际上，我在我的工作区域中有多个.my-item。所以我需要在点击或点击相同的.my-item第二次或在其外面时停用悬停效果。任何修改脚本的想法？非常感谢。 –

@DevinMichaelson你测试了这段代码吗？点击后效果将失效。并且如果接受的答案不起作用，则必须更改标记的答案。 –

答

做到这一点，理想的方式是，你做:hover

.element { 
    background-color: #F00; 
} 

.element:hover, .element:focus { 
    background-color: #0F0; 
}

那应该怎么在你的代码工作，以相同的样式应用到:focus：

.my-item:hover img, 
.my-item:focus img, 
.my-item:active img { 
    -webkit-transform: scale(1.2); 
    transform: scale(1.2); 
} 

.my-item:hover .my-caption, .my-item:focus .my-caption { 
    background: rgba(0, 0, 0, 0.75); 
}

谢谢罗伯特。从来不知道这很简单。我认为它需要JavaScript来实现我的目标。 –

如果你同意这个解决方案是最好的解决方案，你可以'接受'这个答案作为你的明确答案;）。 – Roberrrt

我添加了：根据您的建议进行焦点伪测试，并在Chrome Inspect上进行测试，但点击图片中间的链接仍然可以访问。我做错什么了吗？ –

启用：在触摸屏环境中悬停效果

相关推荐