동일 div이지만 다른 dt의 호버 효과

Question

영어가 불량 할 경우 사전에 사과드립니다.

사이드 메뉴가있는 웹 사이트를 만들고 있습니다. 모든 탭에는 대시 테두리와 텍스트 그림자가 있습니다. (여기 이미지 ->https://dl.dropboxusercontent.com/u/23141053/Captura%20de%20ecr%C3%A3%202015-01-20%2C%20%C3%A0s%2022.52.35.png)

목표는 누군가가 탭을 가리키고있는 그림자도 경계도 가지지 않습니다. 그러나 다른 탭은 같은 방식이어야합니다. 그러나 문제는 탭을 가져 가면 모든 효과가 사라집니다. (이미지 ->https://dl.dropboxusercontent.com/u/23141053/Captura%20de%20ecr%C3%A3%202015-01-20%2C%20%C3%A0s%2022.56.20.png)

나는 모든 탭에 ID를 생성하고이를 사용하여 내 문제를 제어 할 수 있지만 더 많은 "깨끗한"것이 필요하다는 것을 알고있다.

도와 주시겠습니까? 계속 웃어 라! 알렉산드라

.mainRibbon dl { 
 
    margin-top: 220px; 
 
} 
 
.mainRibbon dl, 
 
.mainRibbon dl a { 
 
    font-family: pacifico; 
 
    color: white; 
 
    font-size: 20px; 
 
    -moz-text-decoration-line: underline; 
 
    -moz-text-decoration-style: dashed; 
 
    text-shadow: 1px 1px 1px black; 
 
} 
 
.mainRibbon dl:hover, 
 
.mainRibbon dl:hover a { 
 
    font-family: pacifico; 
 
    color: white; 
 
    font-size: 20px; 
 
    text-decoration: none; 
 
    text-shadow: none; 
 
} 
 
.mainRibbon dl p { 
 
    font-family: pacifico; 
 
    color: #6abbfe; 
 
    font-size: 15px; 
 
    margin-top: -10px; 
 
}

<div class="mainRibbon"> 
 
    <dl> 
 
    <dt>Ementa</dt> 
 
    <p>diária</p> 
 
    <a href="especialidades.html"> 
 
     <dt>Especialidades</dt> 
 
     <p>por encomenda</p> 
 
    </a> 
 
    <a href="bebidas.html"> 
 
     <dt>Bebidas</dt> 
 
     <p>& Sobremesas</p> 
 
    </a> 
 
    <a href="contactos.html"> 
 
     <dt>Contactos</dt> 
 
     <p>horários & encomendas</p> 
 
    </a> 
 
    </dl> 
 
    <p class="picanha">Venha experimentar a nossa Picanha ao fim-de-semana.</p> 
 
</div>

Answer 1

만 <a> 요소가 아닌 <dl>에 CSS를 적용합니다. 이 같은 것 :

.mainRibbon dl:hover a { 
    font-family: pacifico; 
    color: white; 
    font-size: 20px; 
    text-decoration: none; 
    text-shadow: none; 
} 

Answer 2

감사합니다. t.niese. 당신의 응답자가 문제를 이해하는 데 도움이되었습니다.

다음은 다른 사람들의 향후 의심에 대한 코드입니다.

.mainRibbon dl{ 
    margin-top:220px; 
} 

.mainRibbon dl dt, .mainRibbon dl dt a{ 
    font-family: pacifico; 
    color: white; 
    font-size: 20px; 
    -moz-text-decoration-line: underline; 
    -moz-text-decoration-style: dashed; 
    text-shadow: 1px 1px 1px black; 
} 

.mainRibbon dl dt:hover, .mainRibbon dl a:hover{ 
    font-family: pacifico; 
    color: white; 
    font-size: 20px; 
    text-decoration: none; 
    text-shadow:none; 
} 

.mainRibbon dl dd{ 
    font-family: pacifico; 
    color: #6abbfe; 
    font-size: 15px; 
    margin-top: -10px; 
    margin-left: 0px; 
} 

<div class="mainRibbon"> 
      <dl> 
       <dt>Ementa</dt> 
        <dd>diária</dd> 
       <dt><a href="especialidades.html">Especialidades</a></dt> 
        <dd>por encomenda</dd> 
       <dt><a href="bebidas.html">Bebidas</a></dt> 
        <dd>& Sobremesas</dd> 
       <dt><a href="contactos.html">Contactos</a></dt> 
        <dd>horários & encomendas<dd> 
      </dl> 
      <p class="picanha">Venha experimentar a nossa Picanha ao fim-de-semana.</p> 
     </div>