Question

我提前为英语不好而道歉。

我正在创建一个带有横向菜单的网站。所有选项卡都有虚线边框和文本阴影。（图片在这里 - ＆gt; https://dl.dropboxusercontent.com/u/23141053/Captura%20de%20ecr%C3%A3%202015-01-20%2C%20%C3%A0s%2022.52.35.png）

目标不是边界既不是某人悬停标签的阴影。但其他选项卡必须采用相同的方式。但问题是，当我悬停一个标签时，所有效果都会消失。（图片在这里 - ＆gt; 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>

悬停效果在相同的div但不同的dt

2 个答案: