Question

我无法弄清楚这样做的最佳方法是什么，或者只是如何做到这一点，所以任何事情都可以提供帮助。

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

我有这个代码和JSFiddle，我希望删除：悬停效果，当框缩放为大并显示文本时。因此，当.logo-active被激活时，：应该禁用悬停。提前谢谢。

Answer 1

将transform: scale(1.0);添加到.logo-active

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您的徽标的初始比例为0.8，因此将其添加到css代码的底部将起作用（在您的jsfiddle上测试）。

 document.addEventListener("TestEvent", function(data) {
            alert('TestEvent');
 });

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/

删除：使用toggleClass缩放对象后的悬停效果

3 个答案: