html - 悬停效果在相同的 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;
}