即使光標不在文字上，文字也會發光

我已經寫了一些代碼來使文字發光，但文字不僅會在光標位於文字上方時發光，而且當光標位於文字延伸的水平區域上方時也會發光。爲什麼會發生這種情況，只有當光標位於文本上時，我該如何才能使其發光？即使光標不在文字上，文字也會發光

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

來源

2013-06-26 pranavsharma

這是因爲你宣佈整個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-26 17:16:40 Matt

感謝您將它標記爲答案！祝你網站好運！ – Matt

您的文字是在<div>，默認情況下有display:block。如果您希望該元素只與該單詞一樣大，請將其更改爲<span>或給它display:inline-block。

來源

2013-06-26 17:12:00

「內聯塊」方法的示例：http://jsfiddle.net/NUqhw/1/ – showdev

即使光標不在文字上，文字也會發光

回答

相關問題