Kan jag göra så här:
[red]
TD.one
{
Background-color: #000000;
}
TD.one:Hover
{
Background-color: #ffffff;
}
[/red]
:q
mvh icaaq
Hover på TD
14 svar · 479 visningar · startad av icaaq
Nja... Det funkar inte så. hover kan du bara använda på a.
Du kan göra så här:
<table>
<tr>
<td onmouseover="this.style.backgroundColor='#CCCCCC'" onmouseout="this.style.backgroundColor='#FFFFFF'">text</td>
</tr>
</table>
Istället för att ha långa onmouseover="this.style.backgroundColor='#abc123'; this.style.color='#123abc'; this.style......."
kan du använda
onmouseover="this.className='over'" onmouseout="this.className='out'"
eller något liknande, där du anger alla grejer (färger, border o.s.v.) någon annanstans.
Det går visst att använda hover på td, dessutom kan du använda active för onclick-prylen. Fast det funkar tyvärr inte i omoderna browsers :(
För kompatibilitet med äldre browsers brukar jag skriva t ex onmouseover="eval(over)" onmouseout="eval(out)" och lägga in den kod som ska köras i variablerna over och out.
higa skrev:
Det går visst att använda hover på td, dessutom kan du använda active för onclick-prylen. Fast det funkar tyvärr inte i omoderna browsers :(
För kompatibilitet med äldre browsers brukar jag skriva t ex onmouseover="eval(over)" onmouseout="eval(out)" och lägga in den kod som ska köras i variablerna over och out.
Skulle du vilja visa lite kod så kanske jag överväga att bli övertygad ;)
mvh icaaq
Ja, den koden skulle man vilja se. :)
Håller med bägge föregående talare.. :)
Visst, här är lite kod från en webbplats jag designat i tjänsten:
<td class="thumb" onMouseover="eval(mediaOn)" onMouseout="eval(mediaOff)" valign="middle" align="center">
<a href="html/image1.html"><img src="nails/image1.png"></a></td>
if(document.all)
{
mediaOn = "this.style.border = '3px outset #D7E4FD';this.style.padding = '1px';this.style.background='#82ABFD'"
mediaOff = "this.style.border = '1px solid #000000';this.style.padding = '3px';this.style.background='url(/bilder/thumb_bg.jpg) #DDFFFF center center'"
}
else
{
mediaOn = ""
mediaOff = ""
}
.thumb
{
background: url('../bilder/thumb_bg.jpg') #DDFFFF center center;
width: 150px; height: 150px;
float: left;
padding: 3px;
color: black;
border: 1px solid #000000;
-ns4-ignore: yes;
vertical-align: middle;
margin: 2px;
}
.thumb:hover
{
background: #82ABFD; padding: 0px 2px 2px 0px;
border-top: 3px solid #D7E4FD; border-left: 3px solid #D7E4FD;
border-right: 3px solid #212EFD; border-bottom: 3px solid #212EFD;
-moz-border-top-colors: #84ADFF #F3F7FD #D7E4FD; -moz-border-left-colors: #83ABFC #F3F7FD #D7E4FD;
-moz-border-right-colors: #0F141E #212FFD #3A4EFD; -moz-border-bottom-colors: #000000 #212EFD #3A4EFD;
}
.thumb:active
{
border-top: 3px solid #5677FD; border-left: 3px solid #5677FD;
border-right: 3px solid #BCEDFD; border-bottom: 3px solid #BCEDFD;
background: #96C8FD; padding: 1px;
-moz-border-top-colors: #A6D8FF #5677FD #79A4FD; -moz-border-left-colors: #A6D8FF #5677FD #7AA3FD;
-moz-border-right-colors: #8BB5FF #BCEDFD #A7D9FD; -moz-border-bottom-colors: #8BB5FF #BCEDFD #A7D9FD;
}
Anledningen till att mediaOn och mediaOff enbart får värden om man kör Internet Explorer (document.all) är att moderna Gecko-baserade browsers inte behöver det då dom stödjer hover på annat än A-taggar, samt att stenåldersbrowsers som t ex Netscape 4 ändå inte klarar ens mouse events på annat än A-taggar.
Jag hänger faktiskt inte med i ditt exempel higa. :l
Du menar att det är skulle funka eller:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<!--
.test {
background: #999;
}
.test:hover {
background: #555;
}
.test:active {
background: #111;
}
-->
</style>
</head>
<body>
<table>
<tr>
<td class="test">test</td>
</tr>
</table>
</body>
</html>
Koden går ju igenom validatorn men jag kan inte få det att funka i någon webbläsare.
web-tor: Fungerar finfint i Mozilla kan jag meddela. :)
För mig funkar det varken i Netscape 6 eller Mozilla 0.9. :l
Okej, mitt exempel var kanske lite overkill, men hover på td(liksom dom flesta andra taggar, med undantag för t ex script, head och liknande) fungerar som sagt i Mozilla och i andra browsers som följer standarden.
Mozilla 0.9 har ju ca 1½ år på nacken, så jag minns inte om den stödde Hover fullt ut, eller om den liksom Internet Explorer bara stödde det på A-taggar.
Web-tors exempel funkar också för mig i Mozilla 1.2b