07. maj 2005 - 00:48
Der er
10 kommentarer og
1 løsning
Hovereffekt på tabelceller?
Hej Alle.
Er der nogen som ved hvordan man inkluderer hele tabelceller i en a:hover? Således at td.xxx styles efter hvorvidt a:hover er aktiv eller ej?
ex:
a.menu
{
background-color: #1D880E;
color: white;
text-align: center;
display: blocK;
text-decoration: none;
}
a.menu:hover
{
background-color: #1E7811;
color: white;
text-align: center;
display: blocK;
text-decoration: none;
}
td.topstreg
{
background-color:#1D880E;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
width: 10%;
}
Det er her td-topstreg, der skal ændre farve når musecursoren føres hen over et a:hover felt???
Javascript er ganske nemt at bruge ...
<script type="text/javascript">
function markActualTd(elm,mode){
var td = elm.parentNode;
while(td.tagName!="TD")
td = td.parentNode;
td.style.borderTop = mode?"2px solid #234":"2px";
}
</script>
<table>
<tr>
<td><a href="#" onmouseover="markActualTd(this,true);" onmouseout="markActualTd(this,false);">Link</a></td>
<td><a href="#" onmouseover="markActualTd(this,true);" onmouseout="markActualTd(this,false);">Link</a></td>
<td><a href="#" onmouseover="markActualTd(this,true);" onmouseout="markActualTd(this,false);">Link</a></td>
<td><a href="#" onmouseover="markActualTd(this,true);" onmouseout="markActualTd(this,false);">Link</a></td>
<td><a href="#" onmouseover="markActualTd(this,true);" onmouseout="markActualTd(this,false);">Link</a></td>
<td><a href="#" onmouseover="markActualTd(this,true);" onmouseout="markActualTd(this,false);">Link</a></td>
</tr>
<tr>
<td><a href="#" onmouseover="markActualTd(this,true);" onmouseout="markActualTd(this,false);">Link</a></td>
<td><a href="#" onmouseover="markActualTd(this,true);" onmouseout="markActualTd(this,false);">Link</a></td>
<td><a href="#" onmouseover="markActualTd(this,true);" onmouseout="markActualTd(this,false);">Link</a></td>
<td><a href="#" onmouseover="markActualTd(this,true);" onmouseout="markActualTd(this,false);">Link</a></td>
<td><a href="#" onmouseover="markActualTd(this,true);" onmouseout="markActualTd(this,false);">Link</a></td>
<td><a href="#" onmouseover="markActualTd(this,true);" onmouseout="markActualTd(this,false);">Link</a></td>
</tr>
<tr>
<td><a href="#" onmouseover="markActualTd(this,true);" onmouseout="markActualTd(this,false);">Link</a></td>
<td><a href="#" onmouseover="markActualTd(this,true);" onmouseout="markActualTd(this,false);">Link</a></td>
<td><a href="#" onmouseover="markActualTd(this,true);" onmouseout="markActualTd(this,false);">Link</a></td>
<td><a href="#" onmouseover="markActualTd(this,true);" onmouseout="markActualTd(this,false);">Link</a></td>
<td><a href="#" onmouseover="markActualTd(this,true);" onmouseout="markActualTd(this,false);">Link</a></td>
<td><a href="#" onmouseover="markActualTd(this,true);" onmouseout="markActualTd(this,false);">Link</a></td>
</tr>
</table>
<ole>
Nu kan jeg ikke lige se, hvorfor JS ikke er 'så dejligt' - men det er muligheden, du har ...... like it or not.
Alternativet er, at fravælge WWW ... og valget er dit :)
/mvh
</bole>
- og det pudsige er, at der er langt flere kodere, der af uvidenhed disabler CSS i deres kode, end der er brugere, der disabler JavaScript i deres browser. Derfor er det faktisk ofte sikrere at bruge JS end CSS ;o)
05. juni 2005 - 19:58
#10
Jaaahh, men det er skam en yderst velunderbygget 'påstand'. Du kan jo evt. teste dit eget dokument - hvis du tør :)
<script type="text/JavaScript">
alert(document.compatMode)
</script>
- returnerer 'CSS1Compat', hvis dokumentet er CSS-compliant.
Returnerer den andet, har du disabled meget væsentlige dele af CSS i dit dokument. I IE sker det f.eks, hvis du udelader DTD'en - eller hvis du skriver noget før DTD'en - eller hvis du bruger en DTD uden definitions-URL.
Du kan også bare skrive:
java script:alert(document.compatMode)
- i adresselinien og trykke 'Return'. Prøv det på nogle forskellige sites og se, hvor utroligt mange, der ikke kan kode - på trods af, at de, der står bag koderne, sikkert er 'gode kodere' ... i egen selvforståelse ;o)