특정 목록 항목 속성을 변경하십시오.

Question

목록 항목의 배경을 변경하지 않고 덮어 쓰지 않아도 가리 키기 속성이 있는지 확인하려고합니다. 클래스를 사용하여 설명했지만 텍스트는 변경되지 않습니다.

HTML :

CSS

  <div id="header"> 
    <img id="logo" src="images/logo.jpg"> 
    <ul> 
    <li> <a href="#">CONTACT</a> </li> 
    <li> <a href="#">GALLERY</a> </li> 
    <li> <a href="#">EVENTS</a> </li> 
    <li> <a href="#" class="currentpage">HOME </a> </li> 
    </ul>   
    </div> 

: 당신이 태그를 변경하려면 같은

 #header ul { 
     padding-top:1em; 
      } 

     #header ul li a.currentpage { 
     color:white !important; 
     background-color: #F96E5B !important; 
     } 

     #header ul li a { 
     text-decoration: none; 
     color:#676767; 
     font-family: 'Oswald', sans-serif; 
     font-size: 1em; 
     float:right; 
     line-height: 3em; 
     padding-right: 1em; 
     padding-left:1em; 
      } 

      #header ul li a:hover{ 
     background-color: #F96E5B; 
      } 

http://ashwin931996.webege.com

Answer 1

이 코드

<li> 
<a class="one" href="#">CONTACT</a> 
</li> 
<li> 
<a class="two" href="#">GALLERY</a> 
</li class="one"> 
<li> 
<a class="three" href="#">EVENTS</a> 
</li> 
<li> 
<a class="four" href="#">HOME </a> 
</li> 

CSS

#header ul li a.one:hover 
{background-color: #F96E99; 
color: white;} 
#header ul li a.two:hover 
{background-color: #F96E22; 
color: white;} 
#header ul li a.three:hover 
{background-color: #F96Eaa; 
color: white;} 
#header ul li a.four:hover 
{background-color: #F96E55; 
color: white;} 

데모를 시도; http://jsfiddle.net/PbMg2/1/

별도의 클래스 호버 기능에 대해 언급해야합니다. 이것이 당신에게 도움이되기를 바랍니다.

Answer 2

당신이 게시 된 페이지/링크에서 코드를보고 한 후, 보이는 지정한 항목의 배경색 id="selected"

CSS를 당신이 그 대상으로 할 것은 :

이

#header ul li a#selected {background:red /* or whatever color you want it */ }