Javascript 设置放置在网格中的按钮的动画

我尝试在鼠标悬停时给按钮一个“按下”动画，当用户点击时给按钮一个更小的按下动画。我目前有动画工作，但当鼠标悬停在一个按钮上，所有按钮都是动画。我试着分别瞄准每个按钮，但没有任何运气

我还想给每个按钮一个设置的宽度和高度，使他们都是相同的大小。我尝试过给一个设置的宽度和混乱的显示CSS元素，但没有任何成功。我也不能让Issu embed显示出来，因此如果对此有任何建议或建议，那将是非常棒的（预编辑：看起来它显示在JSFIDLE中，尽管不正确，还有按钮。下面是它的外观）

我的朋友：

HTML:

非常感谢您的帮助和指导

---

一切都很好-

这是因为你首先使用了错误的类。您是否使用引导作为css的一部分

在CSS中，您使用了hashtags，而不是用于对CSS标记进行分类的点（.），它可以通过“class”触发。如果要使用标签，需要使用：

id=“cookbook button”而不是按钮标签上的class=“button primary”

---

那是你唯一的问题。您没有正确地向html文档声明css。如果您将hashtag更改为点（.cookbook button），那么您只需将“cookbook button”添加到HTML上声明的css类中的“button primary”旁边，就不会有任何问题

除了Mohamed刚才写的内容之外，CSS还有一个问题——当鼠标悬停在按钮上时，您将上边距1px添加到按钮上，结果所有按钮都被强制向下1px并显示为动画。将按钮悬停CSS更改为此

#cookbook button:hover {
   margin-top: 1px;
   margin-bottom: 9px;
   -moz-box-shadow:    0px .5px 0px 0px #888888;
   -webkit-box-shadow: 0px .5px 0px 0px #888888;
   box-shadow:         0px .5px 0px 0px #888888;
}

添加

页边距底部：9px以补偿悬停按钮上1px的上边距

同时添加一个类似的
页边距底部：8px
切换到：active（激活）状态，以防止单击其中一个按钮时以下所有按钮移动：

#cookbook button:active {
   margin-top: 2px;
   margin-bottom: 8px;
   -moz-box-shadow:    0px 0px 0px 0px #888888;
   -webkit-box-shadow: 0px 0px 0px 0px #888888;
   box-shadow:         0px 0px 0px 0px #888888;
}

所有按钮都会移动，因为您要在悬停时更改其中一个按钮的大小，并且它们的位置取决于它们的大小，因此浏览器必须将它们全部移动。简而言之，将class=“button primary”更改为id=“cookbook button”，因为您在css文件中使用了哈希标记而不是点（.）。那么你的“鼠标悬停”和“活动”也应该起作用了对不起，我应该说得更清楚些。我使用的是框架CSS框架，它使用button primary来创建按钮。我使用的框架CSS在我发布的JSFIDLE中。即使使用button主类标记，您仍然可以添加一个“id”标记。id标记应该等于您在css文件-->id=“cookbook button”中放置的css元素的名称。我理解您的意思，现在可以看到导致不需要的动画的原因，但不幸的是，此解决方案对我不起作用。我会继续胡闹，看看我能不能想出点什么。你能说得更具体一点，到底出了什么问题？因为我把上面提到的补丁应用到了你发布的提琴上，而且按钮看起来像他们想象的那样工作。什么仍然不能正常工作？我仍然有其他按钮的问题，在我悬停的按钮下面，当它们不应该被设置动画时。不过，我在TransformCSS属性中偶然发现了translate元素，并使所有内容都正常工作。：）谢谢你的帮助！
#cookbook button:hover {
   margin-top: 1px;
   margin-bottom: 9px;
   -moz-box-shadow:    0px .5px 0px 0px #888888;
   -webkit-box-shadow: 0px .5px 0px 0px #888888;
   box-shadow:         0px .5px 0px 0px #888888;
}

#cookbook button:active {
   margin-top: 2px;
   margin-bottom: 8px;
   -moz-box-shadow:    0px 0px 0px 0px #888888;
   -webkit-box-shadow: 0px 0px 0px 0px #888888;
   box-shadow:         0px 0px 0px 0px #888888;
}