我有悬停效果的问题

Question

我在 html 中编写了一个按钮，使其在单击时移动并在悬停时变小。
但是在我点击按钮后它不再变小了。
知道为什么或如何解决它吗？

$("#Hide").on("click",function()
  {
  if (hide==0)
    {
    hide = 1;
    $("#Hide").css( { "transform":" translate(-5px,-5px)" })
    }
  else if (hide==1)
    {
    hide=0;
    $("#Hide").css( { "transform":" translate(0px,0px)" })
    }
  });

.button {
  position: relative;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 2;
  text-align: right;
  float: left;
  transition-duration: 1s;
}
.button:hover {
  transform: scale(0.75);
}
#Hide {
  width: 54px;
  background: url(hide.png);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="Hide">X</button>

Answer 1

这是因为您在 CSS 和 jQuery 中使用了两次转换函数 - 而且只使用了一次 - style="" （由 jQuery 添加的是使用过）。

您可以使用 position: relative; top: -5px; left: -5px; 而不是 transform: translate(-5px,-5px) 移动该按钮。

您还可以在单击后切换 class 并定义 4 个转换属性：

button {
    transform: scale(1) transform(0,0)
}

button:hover {
    transform: scale(.75) transform(0,0)
}

button.clicked {
    transform: scale(1) transform(-5px,-5px)
}

button.clicked:hover {
    transform: scale(.75) transform(-5px,-5px)
}

在 JS 中：

$('#Hide').on('click', function() {
    $(this).toggleClass('clicked')
})

Answer 2

你需要把cssclass.button改成button，因为你的文档里没有class

$("#Hide").on("click",function()
  {
  if (hide==0)
    {
    hide = 1;
    $("#Hide").css( { "transform":" translate(-5px,-5px)" })
    }
  else if (hide==1)
    {
    hide=0;
    $("#Hide").css( { "transform":" translate(0px,0px)" })
    }
  });

button {
  position: relative;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 2;
  text-align: right;
  float: left;
  transition-duration: 1s;
}
button:hover {
  transform: scale(0.75);
}
#Hide {
  width: 54px;
  background: url(hide.png);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="Hide">hide button</button>

我有悬停效果的问题

I have problems with hover effect

html

javascript

css

hover