html - 过渡 - 淡出和 webkit 语法

Question

这个按钮会正确地淡入，但当不再悬停在它上面时，它不会淡出，而是会被剪掉另外，需要做什么才能在 safari 上工作？

这是我的代码:

.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

解决方案::

您需要更改您的 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;  
}

---

代码片段:

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

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