Nja... Det funkar inte så. hover kan du bara använda på a.
Kan jag göra så här:
[red]
TD.one
{
Background-color: #000000;
}
TD.one:Hover
{
Background-color: #ffffff;
}
[/red]
mvh icaaq
14 svar · 485 visningar · startad av icaaq
Kan jag göra så här:
[red]
TD.one
{
Background-color: #000000;
}
TD.one:Hover
{
Background-color: #ffffff;
}
[/red]
mvh 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.
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.
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