html - 为什么悬停样式在应用于我的 div 时不起作用？

Question

<分区>

Answer 1

根据他们的来源，您缺少 transition: 0.5s; 因此过渡不是瞬时的，并且 background-size: 200% auto; 增加按钮的背景宽度，因此当它向右滚动时它有要显示的内容。

使用他们的源代码，这是一个简单按钮的示例:

.btn-grad {
  padding:15px;
  background-image: linear-gradient(to right, #2b5876 0%, #4e4376  51%, #2b5876  100%);
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    box-shadow: 0 0 20px #eee;
    display: block;
}
.btn-grad:hover { 
  background-position: right center; 
}

<button class="btn-grad">Submit</button>

这是你的代码:

div {
  width: 90%;
  height: 200px;
  background-image: linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -moz-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -webkit-gradient(linear, left top, left right, color-stop(0%,#fffc00),color-stop(51%,#ffffff ), color-stop(100%,#fffc00 ));
  background-image: -webkit-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -o-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -ms-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  border-radius: 15px;
  position: relative;
  margin: 0 auto;
  margin-top: 15px;
  -moz-box-shadow:
    inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0  0 2px rgb(255,255,255),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
  -webkit-box-shadow:
    inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0  0 2px rgb(255,255,255),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
  box-shadow:
    inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0  0 2px rgb(255,255,255),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
    transition: 0.5s;
    background-size: 200% auto;
}

div:hover {
  background-position: right center;
}

<div></div>