此按钮正常淡入,但不再褪色,而不是在它上面徘徊 此外,为了在野生动物园工作,需要做些什么?
这是我的代码:
.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>
谢谢!
答案 0 :(得分:0)
您的过渡应该像这样添加到主类
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
color: #52AEC9;
transition: .25s;
transition-duration: 0.25s;
transition-timing-function: ease-in-out;
}
答案 1 :(得分:0)
.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>
我的持续时间更长,所以你可以更好地看到它。在safari 9.x中工作正常。 如果您想了解更多有关过渡的信息,请访问css-tricks.com,您需要了解所有相关信息。 https://css-tricks.com/almanac/properties/t/transition/
答案 2 :(得分:0)
<强>解:强>:
您需要将transition
属性更改为元素的正常状态。
<强>说明强>
我之前已经解释过这篇文章中的不同之处:
侧面注意:
我建议您删除<a>
标记中的内联样式,并在CSS外部文件中设置样式,以便更好地维护和分离关注点。执行以下操作:
替换:
style="text-decoration:none;"
使用:
.iob-anchor,
.iob-anchor:hover{
text-decoration: none;
}
CODE SNIPPET
.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;