去除的：悬停效果，使用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/