啓用：在觸摸屏環境中懸停效果

Question

首先，這就是我所說的：jsfiddle。

當鼠標懸停在圖像上時，可以看到4個圖標出現，圖像放大後.my-caption的背景變暗。我已經在移動設備上測試過這個功能，但在臺式機上效果不佳。當我點擊圖像時，圖標下的鏈接在懸停效果的同時被訪問。我想在觸摸屏設備（包括Android和iOS）上實現這種友好。

我的目標：

1. 當用戶點擊圖片，懸停效果被激活（圖標顯示，圖像縮放和黑暗的BG）。如果用戶再次點擊圖像或點擊圖像外的其他位置，懸停效果將被停用（恢復到正常狀態）。
2. 只有在用戶點擊圖標時才能訪問圖標下方的鏈接（輔助點按）。

我該如何使用CSS或簡單JS實現這一目標？謝謝你的幫助。

ps。我必須記得Mary Lou用於這種令人敬畏的懸停效果。

Answer 1

試試這個：

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/

Answer 2

做到這一點，理想的方式是，你做: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); 
}