去除的：懸停效果，使用toggleClass縮放對象

Question

我無法弄清楚什麼是做到這一點是如何做到這一點的最好辦法，或者，所以任何能夠幫助後。

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

我有這樣的代碼和JSFiddle，我想刪除：懸停效果，當箱子被調整爲大，顯示的文本。所以，當.logo活性被激活，：懸停應禁用。先謝謝你。

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/