 Moderator |
|
Ik kan het gedrag wat jij beschrijft niet nabootsen met bovenstaande informatie. Heeft de tabel / de tabelrijen / de klasse tg-031e nog speciale stijlregels die dit gedrag kunnen veroorzaken (bijvoorbeeld een position-stijlregel op een hoger niveau)?
Heb je toevallig e.e.a. van span.dropt uitgeveegd? Want die stijlregels kloppen niet.
Ook declareer je regels dubbel, wat het geheel nogal onleesbaar maakt.
Het is redelijk onmogelijk om een puzzel op te lossen als je niet alle stukjes aanreikt.
---
Je geeft zelf precies aan wat je wilt, dan moet het niet zo moeilijk zijn om dit zo te maken? Je moet wel weten hoe positions werken. Als je position: absolute gebruikt, dan wordt er relatief gepositioneerd ten opzichte van het eerst bovengelegen element met position: relative. Je wilt je td-element (of td.tg-031e, net wat jij wilt) hiervan voorzien. Vervolgens wil je je element rechtsboven ophangen in je cel. Dit doe je met right: 0, top: 0.
Dan, het enige wat er moet gebeuren is de span tonen als er gehoverd wordt. Dat is -samen met de posities- het enige wat in de span.dropt:hover span class hoeft te staan. De rest van de opmaak kan in span.dropt.span.
Een proof-of-concept van het bovenstaande, in een opgeschoonde variant van jouw code wordt dan:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
td { position: relative; }
span.dropt { }
span.dropt span {
display: none;
width: 90px;
height:80px;
position: absolute;
padding: 3px;
border: 1px solid #000000;
z-index: 6;
background-color: #ffffff;
}
span.dropt:hover span { display: block; right: 0; top: 0; }
</style>
</head>
<body>
<table width="200" border="1">
<tr>
<td class="tg-031e"><span class="dropt" title="Kreta"> 4 <span>Starbeach, Chersonisos. Kreta</span></span></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html> td { position: relative; } span.dropt { } span.dropt span { display: none; width: 90px; height:80px; position: absolute; padding: 3px; border: 1px solid #000000; z-index: 6; background-color: #ffffff; } span.dropt:hover span { display: block; right: 0; top: 0; } <table width="200" border="1"> <td class="tg-031e"><span class="dropt" title="Kreta"> 4 <span>Starbeach, Chersonisos. Kreta </span></span></td>
Je CSS kan (dus) een stuk schoner / korter / leesbaarder. |
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Actiefste leden van de maand
