懸停效果在同一個div但不同的dt

我爲窮英語提前道歉。懸停效果在同一個div但不同的dt

我創建了一個側面菜單的網站。所有標籤都有虛線邊框和文字陰影。（圖片 - >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>

來源

2015-01-20 Alexandra Cardoso

當你改變'.mainRibbon DL：懸停，.mainRibbon DL：徘徊了''到.mainRibbon dL的：hover'我猜它至少部分地解決了嗎？但我不知道你爲什麼使用'.mainRibbon dl：hover'？你試圖用這個做什麼？ – 2015-01-20 23:10:25

附加說明：您的html無效。 A ['

」和「: 」元素。一個''元素在那裏是無效的。通常瀏覽器會_fix_這樣一個無效的html，來創建一個有效的DOM。對於你來說，這不會發生（至少在Chrome和FF中），但我想這只是爲了不破壞舊網站。 – 2015-01-20 23:17:23

First com .: .mainRibbon dl：懸停在那裏，因爲第一個標籤沒有錨點，但它也需要有相同的反應。 – 2015-01-21 00:00:31

應用你的CSS僅對<a>元素，而不是<dl>。類似這樣的：

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

來源

2015-01-20 23:06:26 Paul

非常感謝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>

來源

2015-01-21 00:12:42

懸停效果在同一個div但不同的dt

回答

相關問題