HTML略語表 - マウスオーバー時の意味を表示

Question

2列と約80行のHTML表があり、頭字語とその意味が含まれています。

テーブルの最初の行だけを表示し、意味を持ちます（つまり同じtrのtdに付いています）。マウスオーバー時に何らかの種類のボックスが表示されますか？

Answer 1

この質問は以前に聞かれましたが、はいです。あなたはできる。

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> 

Answer 2

これは:hoverセレクタを使用してのみ、CSSで可能です。

ここには、ツールチップを含むセルの例があります。各.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; 
}