Question

试图让我的网站在悬停时切换文本阴影。当我使用没有指定属性的过渡时，您会看到字体大小，颜色等过渡。在过渡中指定text-shadow属性时，不会出现过渡（当前使用Chrome进行测试）。

nav ul li a {
    color: white;
    transition: text-shadow 0.5s ease;
}
    
nav ul li a:hover {
    color:grey;
    text-shadow: 2px 2px 10px rgba(255,255,255,0.23);    
}

Answer 1

您需要在两个声明中添加阴影和过渡

尝试此CSS代码

nav ul li a {
    color: white;
    transition: 0.5s ease;
    text-shadow: 2px 2px 10px rgba(255,255,255,0);
}
    
nav ul li a:hover {
    color:grey;
    text-shadow: 2px 2px 10px rgba(255,255,255,0.23); 
    transition: 0.5s ease;   
}

Answer 2

您确定您不会被颜色的浅浅所迷惑吗？我已经修改了您的代码，并使之成为可行的代码段，如果我将颜色更改为更明确的颜色，例如red和yellow，则实际上可以看到效果。不过，这是很假的。似乎将该属性添加到默认值确实可以工作。

body {
    background: black;
}

h1, h2 {
    color: white;
    text-shadow: 2px 2px 10px red; 
    transition: text-shadow 1s ease;
    z-index: 1;
    position: relative;
}
h2 {
    text-shadow: 2px 2px 10px transparent;
}
    
h1:hover,
h2:hover {
    text-shadow: 2px 2px 10px yellow; 
}

<h1>Hover on me for text shadow!</h1>
<h2>Hover on me for text shadow!</h2>

文本阴影过渡悬停

2 个答案: