html - 带有过渡的 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 为文本添加了“光晕”。
问题是，我对 CSS3 中的新事物不是很流利，因此，尽管我使用了这个片段(它甚至叫这个名字吗？)，但我真的只是模糊地理解它是如何工作的。

因此，只要我向文本添加一个空链接，它就可以正常工作— <a href="#">Text</a> —同时用 <span class="text-glow"></span> 包围它, 但如果我在实际重定向到某个地方(主页)的链接上使用它，当我将鼠标悬停在它上面时，发光扩散/淡入的缓慢过渡不起作用。它就在那里，尽管它确实会正常淡出。

Here is the JSFiddle.将鼠标悬停在“不起作用”的文字上，您就会明白我的意思。

如果你们能帮我解决这个问题，那就太好了——最好只使用 CSS，如果不可能，那么 Javascript 也行，但请不要使用 jQuery，我对它了解不多——如果可能，请解释一下这是怎么回事以一种“准新手”的语言工作。

Answer 1

这是因为您在链接及其父级上都使用了类“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/