HTML首字母縮略詞表 - 顯示鼠標懸停的意義

-3

我有一個HTML表格，包含2列和大約80行，其中包含首字母縮寫詞及其含義。HTML首字母縮略詞表 - 顯示鼠標懸停的意義

是否有一個（CSS？）的方式來顯示錶的第一行，並具有含義（即它在同一tr中伴隨td）出現在鼠標懸停的某種框？

2017-09-05 Digital Lightcraft

也許......你有什麼在您的研究發現，你嘗試過什麼？ – CBroe

現在還沒有，我剛剛開始尋找，它直接帶有JS的單個項目，但是之前沒有做過這個。 –

預計您至少會嘗試爲自己編寫代碼。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –

此問題之前已被問過，但是。您可以。

JSfiddle

CSS：

.meaning { 
    display:none; 
} 
.Acronym:hover + .meaning { 
    display:unset; 
}

HTML：

<table> 
<tbody> 
    <tr><td class="Acronym">Foo</td><td class="meaning">bar</td></tr> 
    <tr><td class="Acronym">Foo2</td><td class="meaning">bar2</td></tr> 
</tbody> 
</table>

來源

2017-09-05 13:26:00 Tijmen

這看起來不錯，很簡單 - 謝謝！ –

請注意，這隻適用於'含義'後面的'首字母縮寫詞'。也就是說，你只能選擇像這樣的兄弟姐妹。它不適用於以前的兄弟姐妹，如果這是有道理的。 – Tijmen

這是可能僅適用於CSS使用:hover選擇。

以下是帶有工具提示的單元格示例，每個.cell可以是表中的<td>。

Codepen

HTML

<span class="cell"> 
    acr. 
    <div class="tooltip">Acronym</div> 
</span>

CSS

.cell { 
    border: 1px solid black; 
    padding: 5px 10px; 
} 

.cell .tooltip { 
    position: absolute; 
    opacity: 0; 
    transition: opacity 250ms; 
    border: 1px solid grey; 
    background-color: white; 
    padding: 2px; 
} 

.cell:hover .tooltip { 
    display: block; 
    opacity: 1; 
}

來源

2017-09-05 13:34:34

這並不回答OP的問題，因爲它需要在*首字母縮寫詞'td'中的含義，而OP在相鄰的'td'中具有含義。 – Tijmen

它實際上並沒有解決我的問題，但通過一些查找和替換，它可以提供比只顯示/隱藏td含義更好的UI/UX。 –

夠公平的。祝你好運，並且不要忘記接受你選擇的答案。 – Tijmen

HTML首字母縮略詞表 - 顯示鼠標懸停的意義

回答

相關問題