HTML & CSSur HTML, XHTML & CSS
7 svar · 417 visningar · startad av SoulGod
Såg på en sida någonstans, en lång lista på information,
och när man höll muspekaren över en "rad" i tabellen,
så blev det en markering över hela raden,
typ en overmouse effekt (jag antar det var bakrunden som ändrades),
iaf var det jättesnyggt , och jag vill ha en sådan på min sida.
Någon som har något tips på hur jag gör detta?
https://www.gusk.nu vet jag i alla fall har en sån.
onmouseover och onmouseout-attribut på tabellceller. Alternativt det fungerar med a:hover, ungefär så här:
a: hover { background: #333; width: 150px; height: 118%; }
eller dyl.
soderlund - han frågar efter en rad, inte en cell...
du kan skriva tr:hover { background:red; }
så lyser den upp i bra browsers. För att få det att funka med IE så får du använda javascript. loopa igenom tabellen och sätta onhover på alla tr-element så löser det sig.
Nåt sånt här kanske?
<tr onmouseover="this.style.background='#ffff99'" onmouseout="this.style.background='#ffffff'">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>tr:hover</title>
<style type="text/css">
tr:hover, tr.hover { background-color:lime; color:black; }
</style>
<!--[if IE]>
<script type="text/javascript" defer="defer">
var elms = document.getElementsByTagName("tr");
for (var i = 0, len = elms.length; i < len; ++i) {
elm = elms[i];
elm.onmouseover = function() {
this.className = "hover";
}
elm.onmouseout = function() {
this.className = null;
}
}
</script>
<![endif]-->
</head>
<body>
<table>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
</tr>
</tbody>
</table>
</body>
</html>
echoSwe skrev:
Glöm inte dina <![CDATA[ zcorpan
<script ...> <![CDATA[ //kod ]]></script>
SCRIPT är redan CDATA i HTML4. Använder du "<![CDATA[" så kommer den strängen att skickas vidare till javascript-motorn, varpå du får ett felmeddelande...