Question

我已经编写了一些代码来使文本发光，但是文本不仅会在光标位于文本上方时发光，而且还会在光标位于文本扩展的水平区域上时发光。为什么会发生这种情况？如果光标在文本上方，我怎么能让它发光呢？

<!DOCTYPE html>
<html>
<head>
    <title>tTEXT</title>
</head>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<body>
<style>
@font-face
{
    font-family: ralewaythin;
    src: url('Cantarell-Regular.ttf')
}
.backgroundimage
{
    background-position: center;
}
.text-glow-hover-with-delay
{
    color: black;
    -webkit-transition: text-shadow 0.15s;
}

.text-glow-hover-with-delay:hover
{
    text-shadow: 0 0 10px #4682b4;
}
.head
{
    font-family: ralewaythin;
    color: black;
    font-size: 75px;
    -webkit-text-stroke: 1px;
}
</style> 
    <div class="text-glow-hover-with-delay">
        <div class="head">TEXT</div>
    </div>
</body>
</html>

Answer 1

您的文字位于<div>，默认情况下为display:block。如果您希望该元素仅与该字词一样大，请将其更改为<span>或将其display:inline-block。

Answer 2

这是因为你声明了整个div来起作用。您需要指定希望发光的文本/元素。这是我使用span标记将发光效果设置为特定文本的示例。如果您只想要标题文本或任何其他标记，则可以将其与h1元素一起使用。

http://jsfiddle.net/g5EbU/1/

<span class="text-glow-hover-with-delay" >GLOWING TEXT</span>

我不需要改变你的代码，就像课程所在的那样。这是你的代码

.text-glow-hover-with-delay
{
color: black;
-webkit-transition: text-shadow 0.15s;
}

我希望这有帮助！如果你需要我重做你的课程并使用标题标签或我能做的事情。

即使光标不在文本上，文本也会发光

2 个答案: