7 svar · 346 visningar · startad av SimOnline
Hur ändrar man bakgrundsfärg vid onmouseover? Det funkar ju bara på table/tr/td vad jag har erfarit. Hur gör man med div/span/li etc?
div:hover {background-color: red;}
span:hover {background-color: green;}
li:hover {background-color: yellow;}
Synd bara att IE inte har tillräckligt stöd för CSS.
Re: Ändra bakgrundsfärg vid onmouseover?
SimOnline skrev:
Hur gör man med div/span/li etc?
Hmm...
Det här verkar fungera i "de stora"...
<!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" xml:lang="en" lang="en">
<head>
<title>Ett exempel</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<div>
<span style="background-color:yellow;"
onmouseover="this.style.backgroundColor='black';this.style.color='white'"
onmouseout="this.style.backgroundColor='yellow';this.style.color=''">
Sample span element with mouse event handlers.
</span>
<div style="background-color:yellow;"
onmouseover="this.style.backgroundColor='black';this.style.color='white'"
onmouseout="this.style.backgroundColor='yellow';this.style.color=''">
Sample div element with mouse event handlers.
</div>
<ul>
<li style="background-color:yellow;"
onmouseover="this.style.backgroundColor='black';this.style.color='white'"
onmouseout="this.style.backgroundColor='yellow';this.style.color=''">
Sample element with mouse event handlers.
</li>
</ul>
</div>
</body>
</html>
Testa: http://member.webforum.nu/2241/rollovertest.html
Vilka webbläsare är det du har problem med att få bakgrundsfärgbyten att fungera i ?
kan också ange bara class namn t.ex
onmouseover="this.className='tabhover'" onmouseout="this.className='tabplain'"
Hur ser koden ut när det ska vara i en tabell?
Hmm...
Så här kanske ;)
<table style="background-color:red;"
onmouseover="this.style.backgroundColor='black';this.style.color='red'"
onmouseout="this.style.backgroundColor='red';this.style.color=''"
border="1"
cellspacing="10">
<tr>
<td>Tabellcell utan rollover </td>
<td style="background-color:yellow;"
onmouseover="this.style.backgroundColor='black';this.style.color='white'"
onmouseout="this.style.backgroundColor='yellow';this.style.color=''">
Tabellcell med egen rollover
</td>
</tr>
<tr style="background-color:teal;"
onmouseover="this.style.backgroundColor='black';this.style.color='white'"
onmouseout="this.style.backgroundColor='teal';this.style.color=''">
<td>Rollover på raden</td>
<td>Rollover på raden</td>
</tr>
</table>
//red: lade till lite större exempel :birp
Okej
Typ: (snip)