有効：タッチスクリーン環境でホバー効果

Question

まず、これは私が話していることです：jsfiddle。

画像をマウスオーバーすると、画像が拡大され、背景が.my-captionの方が暗く表示されているときに4つのアイコンが表示されます。私はこれをモバイルでテストしましたが、デスクトップ上と同じようにうまく動作しませんでした。アイコンの下にあるリンクは、画像をタップしたときのホバー効果と同時にアクセスされました。タッチスクリーンデバイス（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); 
}