Question

我有一个https://jsfiddle.net/wmrq3ora/，但有一个示例无效，我不知道如何修复它。

<div class="submit">
        <input type="submit" value="OVDJE" class="button-blue hvr-shutter-out-horizontal" onclick="upisnik();"/>
</div>

和样式：

 .hvr-shutter-out-horizontal {
  display: block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: #3498db;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.hvr-shutter-out-horizontal:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fbfbfb;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active {
  color: #3498db;
}
.hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.button-blue{
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    display:block;
    width: 100px;
    height: 35px;
    border: #fbfbfb solid 4px;
    cursor:pointer;
    background: #3498db;
    color:white;
    font-size:12px;
    padding-top:8px;
    padding-bottom:12px;
    margin-left:auto;
    margin-right:auto;
    font-weight:700;
}

.submit{
    display:inline;
    text-align:center;
    height:35px;
}

我试图让它像http://ianlunn.github.io/Hover/背景一样工作，快门转换。只有一点点不同的颜色。但是无法让它发挥作用。我错过了什么？有些款式我在这里使用过这个问题吗？忽略函数调用..

Answer 1

问题是:before伪元素不适用于input元素。您改为将input字段更改为button。

检查此answer有关伪元素的信息。

<div class="submit">
  <button type="submit" class="button-blue hvr-shutter-out-horizontal" onclick="upisnik();">OVDJE</button>
</div>

Fiddle

Answer 2

伪元素只能在容器元素上定义。因为它们在容器本身作为DOM元素呈现的方式。输入不能包含其他元素，因此它们不受支持。另一方面，一个按钮虽然是一个表单元素，但它支持它们，因为它是其他子元素的容器。

有关详情：12.1 The :before and :after pseudo-elements

<button type="submit" class="hvr-shutter-out-horizontal" onclick="upisnik();">

https://jsfiddle.net/wmrq3ora/4/

CSS按钮动画不起作用，无法找出原因

2 个答案: