2012-12-31 1 views
0
<!DOCTYPE html> 
<html lang="fr"> 
<head> 
    <style> 
     aside#_left{ 
      width:239px; 
      margin-left:0px; 
      margin-right:1px; 
      display:inline; 
      position:fixed; 
     } 
     #content{ 
      padding-top:70px; 
      padding-left:225px; 
     } 

     .menu01{ 
      background-color:#827F80; 
      width:80%; 
     } 

     ul#nav{ 
      color:#6E7377; 
      list-style-type:none; 
      line-height:200%; 
      padding-top:5px; 
      padding-bottom:10px; 
      margin:0px; 
      padding:0px; 
      text-align:center; 
     } 

      ul#nav li:hover{ 
       cursor:pointer; 
       border-top:1px solid #7a9bb6; 
       border-bottom:1px solid #7a9bb6; 
       background:#5482a0; 
      } 

      #nav a:link{ 
       color:#6E7377; 
       text-decoration:none; 
       font-weight:bolder; 
      } 

      #nav a:hover{ 
       color:#78C6FF; 
      } 

      #nav li * { 
       color: inherit; 
      } 

      #nav li:hover * { 
       color: inherit; 
       color:#78C6FF; 
      } 
    </style> 
</head> 
<body> 
    <aside id="_left"> 
     <img src="images/logo.png" /> 
     <nav class="menu01"> 
      <ul id="nav"> 
       <li><a href="#">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</a></li> 
       <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li> 
       <li><a href="#">Etiam interdum egestas nulla, ac dignissim urna suscipit non.</a></li> 
      </ul> 
     </nav> 
    </aside> 
    <div id="content"> 
     <p> 
      Cras at dapibus mi. Vestibulum quis odio odio, a scelerisque mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
      Ut ornare convallis elementum. Vivamus tincidunt malesuada lacus nec lacinia. Vestibulum lorem tortor, gravida sed convallis nec, dapibus ut leo. Donec id posuere leo. 
      Cras quis ante et dolor dictum euismod. 
     </p> 
    </div> 
</body> 
</html> 

간단히 말해 li : hover의 링크 글꼴 색상을 채우고 싶습니다. 나는 너무 미치광이라고 생각합니다 ...li의 글꼴 색상을 어필하는 방법 : CSS를 사용하여 링크 텍스트로 내 보냅니다.

기본적으로 마우스가 옆쪽 네비게이션 패널을 지나갈 때, 그 안에있는 텍스트가 바뀌어도 아무런 요소가 없어도 <a>처럼 바뀝니다.

업데이트 : : : : : : : : : : : : : : : : : : : ::::::::::::::::::::::: 상태 : 완료이 코드는

이 당신의 li 요소의 내부 요소에 따라 달라집니다

답변

1

업데이트,하지만 가정 당신이 알고있는 그들은 (이 경우 a대로) :

#nav li:hover a { 
    color: inherit; 
} 

a:link, a:visited, a:hovera:active 상태는 다른 선택기의 특이성을 정의하는 방법에 따라하는 것이이 선언을 무시할 수 있지만.

당신이 * 와일드 카드 선택 사용할 수 있습니다, 좀 덜 정확하려면

#nav li:hover * { 
    color: inherit; 
} 

하지만를, 다시이 다른 곳 (정의 된 다른, 더 구체적으로, 선택기에 의해 기각 될 수있는 id이 사용됩니다 특히).

+0

고맙습니다. 솔루션을 포함하도록 코드를 업데이트했습니다. – happy