按钮上的悬停效果不起作用 - CSS3

Question

下面是我的 HTML/CSS 代码，我在其中尝试创建类似此处提到的主页按钮的效果 - https://codepen.io/larrygeams/pen/pdchG

我完成了单个 class，但我的代码无法正常工作。让我知道我在这里做错了什么。

.btn-primary {
  background: green;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  color: #FFF;
}

.btn-primary:hover {
  color: #FFF;
  cursor: pointer;
}

.btn-primary:after {
  content: "";
  height: 100%;
  left: 0;
  top: 0;
  width: 0px;
  position: absolute;
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  z-index: -1;
}

.btn-primary:after:hover {
  background: red;
  width: 100%;
  height: 100%;
}

<button class="btn-primary" type="submit">
    <div class="inner">Add to bag</div>
</button>

我的非工作代码笔 Link - https://codepen.io/anon/pen/gBdVoj?editors=1100

Answer 1

hover伪需要放在之前::after

:hover::after

.btn-primary {
  width: auto;
  position: relative;
  background: green;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  color: #FFF;
  z-index: 2;
}

.btn-primary:hover {
  cursor:pointer;
}

.btn-primary::after {
  content: "";
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 0;
  border-radius: 10px;
  transition: all 0.3s ease 0s;
  z-index: -1;
}

.btn-primary:hover::after {
  width: 100%;
  background: red;
}

<button class="btn-primary" type="submit">Add to bag</button>

按钮上的悬停效果不起作用 - CSS3

Hover effect on button not working - CSS3

html

css

css-transitions