Текст светится, даже если курсор не на тексте

Я написал некоторый код, чтобы текст светился, однако текст светится не только тогда, когда курсор находится над текстом, но и когда курсор находится над горизонтальной областью, расширенной текстом. Почему это происходит и как я могу заставить его светиться только тогда, когда курсор находится над текстом?

<!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>
Источник

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

Надеюсь, это поможет! если вам нужно, чтобы я переделал ваш класс и использовал тег заголовка или что-то, что я могу.

Источник

Ваш текст в <div>который по умолчанию имеет display:block, Если вы хотите, чтобы этот элемент был размером с слово, измените его на <span> или дать display:inline-block,

Источник
Другие вопросы по тегам