クリック時にマウスのホバーを無効にする

Question

ホバー上にフリップするボックスがあります。ここで確認できます。 http://rehabhousedeals.com/shortcode/

ボックスの右上に赤色のアイコンが追加されています。 ユーザーがこのアイコンをクリックすると、元に戻す必要があります。 実際これはモバイルビューです。このアイコンをクリックすると、前面に戻ることができるはずです。 ここに私のCSSにホバー効果を持つコンテナクラスがあります。

.card-container:not(.manual-flip):hover .card, 
.card-container.hover.manual-flip .card{ 
    -webkit-transform: rotateY(180deg); 
-moz-transform: rotateY(180deg); 
-o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 


.card-container.static:hover .card, 
.card-container.static.hover .card { 
    -webkit-transform: none; 
-moz-transform: none; 
-o-transform: none; 
    transform: none; 
} 

これを手助けしてください。

Answer 1

私はあなたの質問を正しく理解していれば解決策があるかもしれません。私はこれだけでは、CSSで行うことができるかどうかわからないんだけど、JavaScriptで、あなたは単にホバー上のクラスを追加し、アイコンをクリックしたときに、この

box.addEventListener('mouseenter', function() { 
    this.classList.add('boxHover'); 
}); 

よう

何かをそれを削除し、それを削除することができますチェックボックスを使用し、かつ/ unflip Uを反転させることができます - アイコンをクリックしたときにここで

icon.addEventListener('click', function() { 
    box.classList.remove('boxHover'); 
}); 

は、唯一の解決策の例 https://jsfiddle.net/vqk8Ld46/

Answer 2

A CSSですチェックされた擬似セレクタと兄弟セレクタを歌います。

.front, 
 
.back { 
 
    width: 100px; 
 
    height: 200px; 
 
} 
 

 
.front { 
 
    background: red; 
 
} 
 

 
.back { 
 
    background: blue; 
 
} 
 

 
.flip-container { 
 
    position: relative; 
 
    perspective: 1000px; 
 
} 
 

 
.flip-control { 
 
    position: absolute; 
 
    visibility: hidden; 
 
    z-index: -1; 
 
} 
 

 
.flip-control:checked + .flipper, 
 
.flip-container.hover .flipper { 
 
    transform: rotateY(180deg); 
 
} 
 

 
.flip-container, 
 
.front, 
 
.back { 
 
    width: 320px; 
 
    height: 480px; 
 
} 
 

 
.flip-control, .flipper { 
 
    transition: 0.6s; 
 
    transform-style: preserve-3d; 
 
    position: relative; 
 
} 
 

 
.front, 
 
.back { 
 
    backface-visibility: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.front { 
 
    z-index: 2; 
 
} 
 

 
.back { 
 
    transform: rotateY(180deg); 
 
}

<div class="flip-container"> 
 
    <input id="flipControl" class="flip-control" type="checkbox" /> 
 

 
    <div class="flipper"> 
 
    <div class="front"> 
 
     <label for="flipControl" class="push-control-label"><img src="https://image.flaticon.com/icons/png/128/148/148752.png" width="30px" style="position:absolute; top:0; right:0; margin-right:-10px; margin-top:-10px;"></label> 
 
    </div> 
 
    <div class="back"> 
 
     <label for="flipControl" class="push-control-label"><img src="https://image.flaticon.com/icons/png/128/148/148752.png" width="30px" style="position:absolute; top:0; right:0; margin-right:-10px; margin-top:-10px;"></label> 
 
    </div> 
 
    </div> 
 
</div>