Question

下面是我的HTML / CSS代码，我试图在其中创建类似此处所述的HOME按钮之类的效果-https://codepen.io/larrygeams/pen/pdchG

我进入了一个类，但是我的代码无法正常工作。让我知道我在这里做错了。

.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>

我的无效代码笔链接-https://codepen.io/anon/pen/gBdVoj?editors=1100

Answer 1

需要在之前

set Output_tot_n = Workbooks("Final_Output.xlsm").Worksheets(Sheet_name).Range("B7")

放置

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

鼠标悬停效果不起作用-CSS3

1 个答案: