Question

此按钮正常淡入，但不再褪色，而不是在它上面徘徊此外，为了在野生动物园工作，需要做些什么？

这是我的代码：

.iob:hover {
    text-shadow: 0 0 10px green;
    transition: .25s;
    transition-duration: 0.25s;
    transition-timing-function: ease-in-out;
}
.iob {
  cursor: pointer;
  margin-left: 30px;
  padding: 8px 18px;
  color: #52AEC9;
}

<a href="https://www.google.com/?gws_rd=ssl" style="text-decoration:none;" target="_blank">
       <p class="iob">Information</p>
        </a>

谢谢！

Answer 1

您的过渡应该像这样添加到主类

.iob {
    cursor: pointer;
    margin-left: 30px;
    padding: 8px 18px;
    color: #52AEC9;
    transition: .25s;
    transition-duration: 0.25s;
    transition-timing-function: ease-in-out;
}

Answer 2

.iob:hover {
    text-shadow: 0 0 10px green;
}
.iob {
  cursor: pointer;
  margin-left: 30px;
  padding: 8px 18px;
  color: #52AEC9;
  /*transition: 2.5s;*/
  transition-duration: 2.5s;
  transition-timing-function: ease-in-out;
}

<a href="https://www.google.com/?gws_rd=ssl" style="text-decoration:none;" target="_blank">
       <p class="iob">Information</p>
        </a>

你可以写过渡：2.5s轻松进出;或转换持续时间......

我的持续时间更长，所以你可以更好地看到它。在safari 9.x中工作正常。如果您想了解更多有关过渡的信息，请访问css-tricks.com，您需要了解所有相关信息。 https://css-tricks.com/almanac/properties/t/transition/

Answer 3

<强>解：：

您需要将transition属性更改为元素的正常状态。

<强>说明

我之前已经解释过这篇文章中的不同之处：

What is the difference between applying CSS transition property in hover rather than in its normal state?

侧面注意：

我建议您删除<a>标记中的内联样式，并在CSS外部文件中设置样式，以便更好地维护和分离关注点。执行以下操作：

替换：

style="text-decoration:none;"

使用：

.iob-anchor,
.iob-anchor:hover{
  text-decoration: none;  
}

CODE SNIPPET

＆＃13;

.iob-anchor,
.iob-anchor:hover{
text-decoration: none;  
}

.iob {
  cursor: pointer;
  margin-left: 30px;
  padding: 8px 18px;
  color: #52AEC9;
  transition: .25s;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
}

.iob:hover {
  text-shadow: 0 0 10px green;
}

＆＃13;

<a class="iob-anchor" href="https://www.google.com/?gws_rd=ssl" target="_blank">
  <p class="iob">Information</p>
</a>

＆＃13;

过渡 - 淡出和webkit语法

3 个答案: