HTML Tableau des acronymes - montrer la signification sur mouseover

-3

J'ai un tableau HTML avec 2 colonnes et environ 80 lignes, qui contient des acronymes, et leurs significations. Y a-t-il un moyen (CSS?) D'afficher uniquement la première ligne de la table, et d'avoir la signification (c'est-à-dire qu'elle accompagne td dans le même tr) dans une sorte de boîte au passage de la souris?HTML Tableau des acronymes - montrer la signification sur mouseover

Source

2017-09-05 Digital Lightcraft

Probablement ... qu'est-ce que vous avez trouvé dans votre recherche, ce que vous avez essayé? – CBroe

Rien pour l'instant, je viens de commencer à chercher, c'est direct avec des éléments simples avec JS mais je n'ai pas fait cela à toute une table avant. –

Vous devriez au moins tenter de le coder par vous-même. Stack Overflow n'est pas un service d'écriture de code. Je suggère que vous fassiez un peu de [** recherche supplémentaire **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) , soit via Google ou en cherchant SO, faire une tentative et. Si vous avez encore des problèmes, revenez avec ** votre code ** et expliquez ce que vous avez essayé. –

Cette question a déjà été posée, mais oui. Vous pouvez.

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>

Source

2017-09-05 13:26:00 Tijmen

Cela semble joli et simple - Merci! –

Notez que cela ne fonctionne que si le 'meaning' suit le' acronym'. Autrement dit, vous ne pouvez sélectionner que les frères et sœurs suivants. Cela ne fonctionne pas pour un frère ou une sœur, si cela a du sens. – Tijmen

Ceci est possible avec seulement l'aide du sélecteur css :hover.

Voici un exemple de cellule avec une info-bulle, chaque .cell peut être un <td> dans un tableau.

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; 
}

Source

2017-09-05 13:34:34

Cela ne répond pas à la question de l'OP, car elle nécessite que les significations soient * à l'intérieur de * l'acronyme «td», tandis que OP a les significations dans un «td» adjacent. – Tijmen

Il ne résout pas vraiment ma question EXACT, mais avec un peu de trouver et de remplacer cela permet une meilleure interface utilisateur/UX que de montrer/cacher la signification de td. –

Assez juste. Bonne chance, et n'oubliez pas d'accepter la réponse de votre choix. – Tijmen

HTML Tableau des acronymes - montrer la signification sur mouseover

Répondre

Questions connexes