I need some assistance with my code that creates a glowing effect on text. Currently, the glow effect appears not only when the cursor hovers directly over the text but also when it hovers over the area around the text. Can someone explain why this is happening and provide guidance on how I can make the glow effect trigger only when the cursor is directly over the text?
<!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>