varför får jag ingen onMouseOver-effekt med följande kod:
<tr onmouseover="this.style.border = 'red solid 1px';" onmouseout="this.style.border = ''">
kan man inte göra så i en tr-tagg?
4 svar · 312 visningar · startad av greymane
varför får jag ingen onMouseOver-effekt med följande kod:
<tr onmouseover="this.style.border = 'red solid 1px';" onmouseout="this.style.border = ''">
kan man inte göra så i en tr-tagg?
Du kar skrivit egenskaperna för kantlinjeni fel ordning.
I CSS skriver man:
border: 1px solid red;
funkar fortfarande inte:
<tr onmouseover="this.style.border = '1px solid red';" onmouseout="this.style.border = ''">
Av någon anledning funkar det inte att ange border på TR, men däremot TD funkar bra. I CSS skulle det se ut ungefär såhär:
tr:hover td { border: 1px solid red; }
Dock fungerar det inte med IE, men vi får väl hitta nån workaround med lite JavaScript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>test</title>
<style type="text/css">
td { border: 1px solid black; }
tr:hover td, tr.hover td { border-color: red; }
</style>
<!--[if IE]>
<script type="text/javascript">
window.onload = function(){
var trs = document.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++){
var tr = trs[i];
tr.onmouseover = function(){
this.className = "hover";
}
tr.onmouseout = function(){
this.className = "";
}
}
}
</script>
<![endif]-->
<table>
<tr><td>test<td>test
<tr><td>test<td>test
<tr><td>test<td>test
<tr><td>test<td>test
<tr><td>test<td>test
<tr><td>test<td>test
</table>
:)
Insider skrev:
Du kar skrivit egenskaperna för kantlinjeni fel ordning.
I CSS skriver man:border: 1px solid red;
Även om du skriver dem i den ordningen är det inget tvång.
Value: [ <border-width> || <border-style> || <'border-top-color'> ] | inherit
http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties
A double bar (||) separates two or more options: one or more of them must occur, in any order.