0

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

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

2 回答 2

3

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

于 2013-06-26T17:12:00.990 回答
0

这是因为你声明了整个 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;
}

我希望这有帮助！如果您需要我重做您的课程并使用标题标签或我可以使用的东西。

于 2013-06-26T17:16:40.773 回答