mouseout - tillbaka till genomskinlig bakgrund

6 svar · 302 visningar · startad av magnusfeldth 30 sep. 2003

magnusfeldthMedlem sedan jan. 20034 480 inlägg

Frågan30 sep. 2003 19:49#1

Använder denna koden i en tabell:
onMouseOver="this.style.background='#FFFFFF'" onMouseOut="this.style.background='#???'

När den hålls över skall bakgrunden ändras från genomskinlig till vit... men när man tar mouseout vill jag att den skall gå tillbaka till att vara genomskinlig... hur gör jag då?

CheguelinMedlem sedan juli 2003303 inlägg

30 sep. 2003 20:29#2

Jag vet inte riktigt hur det fungerar men jag tror att du kan sätta bakgrunden till transparent. Annars så fungerar det att sätta background till "", i alla fall i IE. Jag har för mig att jag har upplevt förhinder med det i mozilla.

WebboteketMedlem sedan sep. 200363 inlägg

30 sep. 2003 20:35#3

Prova med "transparent"
http://www.w3schools.com/css/pr_background-color.asp

ejickMedlem sedan mars 2001895 inlägg

30 sep. 2003 21:07#4

kan du inte bara skriva:

onMouseOut="this.style.background='';"

jarvkloMedlem sedan juli 20013 378 inlägg

1 okt. 2003 07:56#5

Hmm... Precis som Peter och Christian säger så är "transparent" är ett korrekt färgvärde...
Och detta exempel funkar iallafall i Firebird, MSIE6 och Opera7 (de enda jag snabbt kunde testa med nu direkt ;) )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Test</title>
</head>
<body>
<table style="background:url(testbild.gif);width:200px;height:200px">
<tr><td>&amp;nbsp;</td></tr>
<tr>
  <td onMouseOver="this.style.background='#FFFFFF'" onMouseOut="this.style.background='transparent'">
      Hej hopp!
  </td>
</tr>
<tr><td>&amp;nbsp;</td></tr>
</table>
</body>
</html>

Koden finns också upplagd på http://member.webforum.nu/2241/onmouseover_transparent.html

SugarDaddyMedlem sedan apr. 20021 155 inlägg

1 okt. 2003 08:03#6

Sidofråga, har för mig att det varit uppe innan men hittade inget vid en snabbsökning, iaf:
kan man "förenkla" koden på något sätt och exvis slippa ange

<td onMouseOver="this.style.background='#FFFFFF'" onMouseOut="this.style.background='transparent'">
för varje enskild <td> och istället bara ange ngt i stil med <td class="swapbg">?

dectgapMedlem sedan sep. 20021 655 inlägg

1 okt. 2003 09:19#7

SugarDaddy skrev:

Sidofråga, har för mig att det varit uppe innan men hittade inget vid en snabbsökning, iaf:
kan man "förenkla" koden på något sätt och exvis slippa ange

<td onMouseOver="this.style.background='#FFFFFF'" onMouseOut="this.style.background='transparent'">
för varje enskild <td> och istället bara ange ngt i stil med <td class="swapbg">?

Det kan du göra genom att blanda in lite Java Script:

<script type="text/javascript">
window.onload=function(){
  var tags = document.getElementsByTagName('td');
  for(i=0; i<tags.length; i++){
    if(tags[i].className=="swapbg"){
      tags[i].onmouseover=function(){
        this.style.background="#fff";
      }
      tags[i].onmouseout=function(){
        this.style.background="transparent";
      }
    }
  }
}
</script>

...

<body style="background: #000;">

<table>
  <tr>
    <td class="swapbg">Text</td>
    <td class="swapbg">Text</td>
    <td class="swapbg">Text</td>
  </tr>
  <tr>
    <td class="swapbg">Text</td>
    <td class="swapbg">Text</td>
    <td class="swapbg">Text</td>
  </tr>
</table>

</body>

I Mozilla kan man strunta i skriptet och istället lösa det med CSS:

<style type="text/css">
.swapbg {
  background: transparent;
}

.swapbg:hover {
  background: #fff;
}
</style>