CSS 带有过渡的发光（阴影？）不完全有效

Question

这有点特殊，因此很难选择正确的标题或尝试找到已经存在的修复程序，但无论如何：

我在网上搜索类似的东西时发现了这个代码片段，并决定在我正在从事的项目中使用它：

.text-glow:hover, .text-glow:focus, .text-glow:active {
   -webkit-stroke-width: 5.3px;
   -webkit-stroke-color: #FFFFFF;
   -webkit-fill-color: #FFFFFF;
   text-shadow: 1px 0px 20px yellow;
   -webkit-transition: width 0.3s; /*Safari & Chrome*/
   transition: width 0.3s;
   -moz-transition: width 0.3s; /* Firefox 4 */
   -o-transition: width 0.3s; /* Opera */
   }
.text-glow a {
   -webkit-transition: all 0.3s ease-in; /*Safari & Chrome*/
   transition: all 0.3s ease-in;
   -moz-transition: all 0.3s ease-in; /* Firefox 4 */
   -o-transition: all 0.3s ease-in; /* Opera */
   text-decoration:none;
   color:white;
   }

它使用纯CSS向文本添加"glow"。
问题是，我对 CSS3 中的新事物不是很流利，因此，尽管我使用了这个片段（它甚至叫这个名字吗？），但我真的只是模糊地理解它是如何工作的。

所以，只要我在文本中添加一个空的 link，它就可以正常工作——<a href="#">Text</a>——同时用 <span class="text-glow"></span> 包围它，但是如果我在 link 实际上重定向到某个地方（主页），当我将鼠标悬停在它上面时，发光 spreading/fading 的缓慢过渡不起作用。它就在那里，虽然它确实会正常淡出。

Here is the JSFiddle. 将鼠标悬停在 "Doesn't Work" 的文字上，您就会明白我的意思。

如果你们能帮我解决这个问题就太好了——最好只使用 CSS，如果不可能，那么 Javascript 没问题，但请不要 jQuery，还不太了解 - 如果可能的话，用 "quasi-newbie" 语言解释一下它是如何工作的。

Answer 1

这是因为您在 link 及其父项上都使用了 class "umn"。

更改为

<span class="unm"><a href="index.html" class="unm">Doesn't Work</a></span>

到

<span class="unm"><a href="index.html">Doesn't Work</a></span>

它会起作用的。查看我更新的 fiddle：https://jsfiddle.net/yd8tpkw5/

CSS 带有过渡的发光（阴影？）不完全有效

CSS glow(shadow?) with transition doesn't completely work

html

css

hyperlink

css-transitions