Question

我似乎无法在这里找到我做错的事。转换属性应在元素悬停时生效，但事件发生时不会发生任何事情。

有人能够看到我在这里做错了吗？

＆＃13;

.btn:link,
.btn:visited {
  text-transform: uppercase;
  padding: 15px 40px;
  text-decoration: none;
  border-radius: 100px;
  transition: all .2s;
}

.btn-white {
  background-color: white;
  color: #777;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn:active {
  transform: translateY(-1px);
}

＆＃13;

<div class="logobox">
  <img src="img/logo-white.png" class="logo" alt="logo">
</div>
<div class="text-box">
  <h1 class="primary-header">
    <span class="heading-primary-main">Outdoors</span>
    <span class="heading-primary-sub">is where life happens</span>
  </h1>
  <a href="#" class="btn btn-white">Discover Our Tours</a>
</div>

＆＃13;

Answer 1

默认情况下，链接为display:inline，因此不受transform的影响。

建立链接display:inline-block。

＆＃13;

.btn:link,
.btn:visited {
  text-transform: uppercase;
  padding: 15px 40px;
  text-decoration: none;
  border-radius: 100px;
  transition: all .2s;
  display: inline-block;
}

.btn-white {
  background-color: white;
  color: #777;
}

.btn:hover {
  transform: translateY(-30px);
}

.btn:active {
  transform: translateY(-10px);
}

＆＃13;

<div class="text-box">
  <h1 class="primary-header">
    <span class="heading-primary-main">Outdoors</span>
    <span class="heading-primary-sub">is where life happens</span>
  </h1>
  <a href="#" class="btn btn-white">Discover Our Tours</a>
</div>

＆＃13;

Answer 2

您的链接不是块元素，我认为这是问题的来源。 <a>...</a>是内联元素，您无法对这些内容应用transform。

此处描述了transformable elements。

至于你的代码本身，这应该可以解决问题：

.btn-white {
  background-color: white;
  color: #777;
  display: inline-block;
}

Answer 3

.text-box {
  margin: 30px auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  font-family: sans-serif;
}
.btn {
   text-transform: uppercase;
   padding: 15px 40px;
   text-decoration: none;
   border-radius: 100px;
 }
.btn-white {
   background-color: white;
   border: 1px solid #666;
   color: #777;
   transform: scaleY(1);
   transition: transform 1.5s ease;
}
.btn-white:hover {
    transform: scaleY(2);
 }

 .btn:active {
    transform: translateY(1);
  }

<div class="logobox">
  <img src="img/logo-white.png" class="logo" alt="logo">
</div>
<div class="text-box">
  <h1 class="primary-header">
    <span class="heading-primary-main">Outdoors</span>
    <span class="heading-primary-sub">is where life happens</span>
  </h1>
  <a href="#" class="btn btn-white">Discover Our Tours</a>
</div>

转换不适用于css悬停元素

3 个答案: