悬停效果在同一个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

应用你的CSS仅对<a>元素，而不是<dl>。类似这样的：

.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>