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

这是因为你正在使用班级＆＃34; umn＆＃34;在链接和它的父母。

从

更改

<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>

它会起作用。请参阅我更新的小提琴：https://jsfiddle.net/yd8tpkw5/

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

1 个答案: