div 위로 마우스를 가져갈 때마다 div 광선 안에 텍스트를 만드는 방법

Question

좋아요.이 Navbar에는 텍스트가 들어있는 일련의 5 div가 있습니다. 나는 div 위로 마우스를 가져갈 때마다 div의 내부에있는 <p> 요소가 빛을 낼 곳을 만들고 싶습니다. 나는 정확한 CSS 태그를 모두 알고 빛을 얻지 만, (div) : hover {} CSS 태그를 사용하여 그 안에 텍스트가 빛나고 전체를 인식하지 못하도록한다는 것을 인식하기에 어려움을 겪는다. div. 이것을 위해 필요한 코드가 있습니다.

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

이게 무슨 뜻이야? 0을가 하였다 색 번짐의 크기 뒤에 X & Y 오프셋은이다

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

.