Question

我试图在鼠标悬停时为按钮提供“按下”动画，而在用户点击时则按下另一个较小的按下动画。我目前有动画工作但当鼠标悬停在一个按钮上时，所有按钮都是动画的。我尝试单独定位每个按钮，但没有任何运气。

我还想给每个按钮设置一个宽度和高度，使它们的大小相同。我已经尝试给出一个设置宽度并且与显示CSS元素混淆但是没有取得任何成功。我也不能让ISSUU嵌入显示，所以如果有任何建议或建议也会很棒（预编辑：看起来它出现在JSFiddle中，虽然不正确，以及按钮。这是from the semigroups library）的样子。

我的JSFiddle：on my browser

HTML：

<div id="cookbook">
  <div class="container">
    <div class="row">
      <div class="twelve columns">
        <h1>Order the lemonade cookbook</h1>
      </div>
    </div>
    <div class="row">
      <div class="six columns">
            <div data-configid="0/5714789" class="issuuembed"></div><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script> 
      </div>
      <div class="six columns">
        <p>"As a chef, I have a very high bar that has to be met for me to enjoy other people’s food. Alan Jackson’s lemonade has more than exceeded that bar."</p>
        <p1>- MICHAEL CHIARELLO, OWNER OF THE CRITICALLY ACCLAIMED BOTTEGA</p1>
        <h2>get your copy:</h2>

          <button type="submit" class="button-primary">Amazon</button>
          <button type="submit" class="button-primary">Barnes &amp; Noble</button>
          <button type="submit" class="button-primary">Indie Bound</button>
          <button type="submit" class="button-primary">Powell's Books</button>
          <button type="submit" class="button-primary">Books-a-Million</button>
          <button type="submit" class="button-primary">Overstock</button>
      </div>
    </div>
  </div>
</div>

CSS：

#cookbook{
  background-image: url(http://i.lmnd3.com/images/LemonadeBkg_Broc.jpg);
  position: float;
  min-height: 800px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;

}
#cookbook .issuuembed {
    width: 525px;
    height: 340px;
    margin: 0 auto;
    display: block;
}

#cookbook h1{
  font-size: 4rem;
  color: #FFFFFF;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
  text-transform: uppercase;
  text-align: center;
  margin-top: 10rem;
}

#cookbook p{
  font-size: 2rem;
  color: #FFFFFF;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
  font-style: italic;
  font-weight: 700;
  margin-bottom: 1rem;
}
#cookbook p1{
  font-size: 2rem;
  color: #FFFFFF;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
  font-weight: 400;
}

#cookbook h2{
  margin-top: 1.5rem;
  font-size: 4rem;
  color: #FFFFFF;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
  font-weight: 700;
  text-transform: uppercase;
}

#cookbook button{

  border-radius: 4px;
  font-size: 16px;
  background-color: #E4572E;
  border-color: #E4572E;
  -moz-box-shadow:    0px 2px 0px 0px #888888;
  -webkit-box-shadow: 0px 2px 0px 0px #888888;
  box-shadow:         0px 2px 0px 0px #888888;
}

#cookbook button:hover{
  margin-top: 1px;
  -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;
  -moz-box-shadow:    0px 0px 0px 0px #888888;
  -webkit-box-shadow: 0px 0px 0px 0px #888888;
  box-shadow:         0px 0px 0px 0px #888888;
}

非常感谢任何帮助或指导！

一切顺利 -

Answer 1

除了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;
}

添加margin-bottom: 9px;以补偿悬停按钮上的1px上边距。

同样将margin-bottom: 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;
}

Answer 2

这是因为你首先使用了错误的课程。你使用bootstrap作为你的CSS的一部分吗？

在CSS中，您使用了主题标签而不是点（。），用于对css标签进行分类，并且可以使用＆＃34; class＆＃34;来触发。如果要使用主题标签，则需要使用：

id =＆＃34; cookbook button＆＃34;而不是class =＆＃34; button-primary＆＃34;在按钮标签上。

这是你唯一的问题。您没有正确地将hss声明为html文档。如果您将主题标签更改为点（.cookbook按钮），那么您只需添加＆＃34; cookbook按钮＆＃34;在＆＃34; button-primary＆＃34;旁边的HTML上声明的css类没有任何问题。

动画按钮放置在网格中

2 个答案: