我有悬停效果的问题答案

【问题标题】：I have problems with hover effect我有悬停效果的问题
【发布时间】：2019-12-29 02:48:48
【问题描述】：

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

【问题讨论】：

能否分享您的问题的小提琴链接？
从哪里来隐藏全局？
@SifatHaque 不需要小提琴或链接。可执行代码可以在问题的此处生成。
请同时添加相关的 HTML。

标签： javascript html css hover

【解决方案1】：

这是因为你在 CSS 和 jQuery 中使用了两次变换函数 - 并且只使用了一次 - style="" （使用了 jQuery 添加的）。

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

您还可以在单击后切换类并定义 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')
})

【讨论】：

【解决方案2】：

您需要将 css 类 .button 更改为 button，因为您的文档中没有这样的类。

$("#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>

【讨论】：