Как сделать так, чтобы текст внутри элемента div светился, когда вы наводите курсор на элемент div

Question

Хорошо, у меня есть этот navbar, это серия из 5 делителей, внутри которых есть текст. Я хочу сделать это, где всякий раз, когда я наведите курсор на div <p> элемент внутри div будет иметь свечение. Я знаю все правильные теги CSS, чтобы получить свечение и тому подобное, но я озадачен, когда дело доходит до тегов (div):hover { } css, чтобы понять, что я хочу, чтобы текст внутри них светился, а не весь дела. Вот код, который вам понадобится для этого.

HTML

<div id="navBar">
    <a class="navLinks" href="#"> <!-- Replace the # with your url or directory link, keep the "" around it. -->
        <div class="navButtonsNorm" id="n1">
            <p class="navTextNorm">Donate</p><!-- Replace the text between the <p></p> tags with your own link names. -->
    </div>
    </a>
    <a class="navLinks" href="#"> <!-- Replace the # with your url or directory link, keep the "" around it. -->
        <div class="navButtonsNorm" id="n2">
            <p class="navTextNorm">Contact Me</p><!-- Replace the text between the <p></p> tags with your own link names. -->
        </div>
    </a>
    <a class="navLinks" href="#"> <!-- Replace the # with your url or directory link, keep the "" around it. -->
        <div class="navButtonsNorm" id="n3">
            <p class="navTextNorm">Portfolio</p><!-- Replace the text between the <p></p> tags with your own link names. -->
        </div>
    </a>
    <a class="navLinks" href="#"> <!-- Replace the # with your url or directory link, keep the "" around it. -->
        <div class="navButtonsNorm" id="n4">
            <p class="navTextNorm">About me</p><!-- Replace the text between the <p></p> tags with your own link names. -->
        </div>
    </a>
    <a class="navLinks" href="#"> <!-- Replace the # with your url or directory link, keep the "" around it. -->
        <div class="navButtonsNorm" id="n5">
            <p class="navTextNorm">Home</p> <!-- Replace the text between the <p></p> tags with your own link names. -->
        </div>
    </a>
</div>

CSS

.navButtonsNorm {
    width:150px;
    height:50px;
    border-right:1px inset black;
    float:right;
    background: rgba(254,254,254,1);
    background: -moz-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(240,240,240,1) 47%, rgba(219,219,219,1) 52%, rgba(226,226,226,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(254,254,254,1)), color-stop(47%, rgba(240,240,240,1)), color-stop(52%, rgba(219,219,219,1)), color-stop(100%, rgba(226,226,226,1)));
    background: -webkit-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(240,240,240,1) 47%, rgba(219,219,219,1) 52%, rgba(226,226,226,1) 100%);
    background: -o-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(240,240,240,1) 47%, rgba(219,219,219,1) 52%, rgba(226,226,226,1) 100%);
    background: -ms-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(240,240,240,1) 47%, rgba(219,219,219,1) 52%, rgba(226,226,226,1) 100%);
    background: linear-gradient(to bottom, rgba(254,254,254,1) 0%, rgba(240,240,240,1) 47%, rgba(219,219,219,1) 52%, rgba(226,226,226,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#e2e2e2', GradientType=0 );
}
.navTextNorm {
    font-family:CODE Light;
    font-size:24px;
    color:black;
    -webkit-text-stroke:1px;
    text-align:center;
    margin-top:15px;
}
.navLinks {
    text-decoration:none;
}
.navLinks:hover{

}

Спасибо, если вы можете помочь.

Answer 1

Это то, что вы имеете в виду?

.navLinks:hover{
    text-shadow:0 0 5px #ff0000;
}

Где нули - смещения x & y, сопровождаемые размером размытия, сопровождаемого цветом.