トグルクラスを使用してオブジェクトをスケールした後のホバー効果の除去

Question

何が最良の方法であるか、またはこれを行う方法がわからないので、何かが助けになります。

$(document).ready(function() { 
     $("#button").click(function() { 
      $('.logo').toggleClass('logo-active'); 
     }); 
     $("#button").click(function() { 
      $('.text').toggleClass('text-active'); 
     });}); 

私はこのコードとJSFiddleを持っていると私は削除したいと思います：ボックスはビッグにスケーリングされたときに、効果を置いて、テキストが表示されます。したがって、.logo-activeが有効になっている場合、：hoverを無効にする必要があります。前もって感謝します。

Answer 1

追加transform: scale(1.0);.logo-activeへ

$(document).ready(function() { 
 
    $("#button").click(function() { 
 
    $('.logo').toggleClass('logo-active'); 
 
    }); 
 
    $("#button").click(function() { 
 
    $('.text').toggleClass('text-active'); 
 
    }); 
 
});

.logo { 
 
    background: blue; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-top: -50px; 
 
    margin-left: -50px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    
 
    transform: scale(0.8); 
 
    transition: all 0.5s ease; 
 
} 
 

 
.logo:hover { 
 
    transform: scale(1.0); 
 
    cursor: pointer; 
 
} 
 

 
.logo-active { 
 
    background-color: blue; 
 
    width: 200px; 
 
    height: 200px; 
 
    margin-top: -100px; 
 
    margin-left: -100px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: scale(1.0); 
 
} 
 

 
.text { 
 
    opacity: 0; 
 
    transition: all 0.5s ease; 
 
} 
 

 
.text-active { 
 
    margin-top: -50px; 
 
    opacity: 1.0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="button" class="logo"> 
 
     <p class="text">Hello/Hi</p> 
 
    </div>

Answer 2

ロゴの初期尺度は0.8です。したがって、これをCSSコードの下部に追加すると、jsfiddleでテストされます。

.logo-active:hover { 
    transform: scale(.8); 
} 

Answer 3

あなたは

$(document).ready(function() { 

     $("#button").click(function() { 
      $('.logo').toggleClass('logo-active'); 
      $('.logo').toggleClass('logo_hover') 

     }); 
     $("#button").click(function() { 
      $('.text').toggleClass('text-active'); 
     }); 
}); 


.logo_hover:hover { 
    transform: scale(1.0); 
    cursor: pointer; 
} 


<div id="button" class="logo logo_hover"> 
    <p class="text">Hello/Hi</p> 
</div> 

参照jsFiddleを余分なクラスを作成し、それを切り替えることができます：https://jsfiddle.net/1xsx4pjk/3/