Hi
What I am trying is when I move my mouse over a table row its background color sholud change.For this I have the following style
tr.row1 {
background-color: #FFFFFF;
}
tr.row1:hover {
background-color: #f1f1f1;
}
This works in firefox but not in IEIn IE, CSS support is very poor. hover is only supported for the <a> tag. You can still get the effect to work, by using behaviors. To do this, you need a couple of things. First is a non-standard bit of code in the CSS:tr.row1 {
background-color: #FFFFFF;
behavior:url(IEHover.htc);
}Second is the file IEHover.htc<public:attach event="onmouseover" onevent="hover()" />
<public:attach event="onmouseout" onevent="unhover()" />
<script language="JScript">
function hover() {
element.className += "hover";
}
function unhover() {
element.className = element.className.replace(/hover/,"");
}
</script>And finally, you will need another class in your CSStr.row1hover {
background-color: #f1f1f1;
behavior:url(IEHover.htc);
}What this behavior does is use Javascript to change the classname of the element when you hover over it, and change it back when you move off.
I am not really well versed in this approach, so I may have done something wrong in the above. Comments from my betters are welcome and appreciated.Not that I normally jump to M$'s defense, but the CSS 2.1 spec for pseudo classes (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes">http://www.w3.org/TR/CSS21/selector.htm ... do-classes</a><!-- m -->) "doesn't define which elements may be in the above states [:hover, :active, or :focus]...".Not that I normally jump to M$'s defense, but the CSS 2.1 spec for pseudo classes (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes">http://www.w3.org/TR/CSS21/selector.htm ... do-classes</a><!-- m -->) "doesn't define which elements may be in the above states [:hover, :active, or :focus]...".
Therefore it applies to all.Therefore it applies to all.
I think if that's what they meant, then they would have said "it applies to all elements", not that it does not specify which elements, hmmmmm...???Why? The general rule is, you can legally do anything that you aren't explicitly disallowed from doing.In IE, CSS support is very poor. hover is only supported for the <a> tag. You can still get the effect to work, by using behaviors. To do this, you need a couple of things. First is a non-standard bit of code in the CSS:tr.row1 {
background-color: #FFFFFF;
behavior:url(IEHover.htc);
}Second is the file IEHover.htc<public:attach event="onmouseover" onevent="hover()" />
<public:attach event="onmouseout" onevent="unhover()" />
<script language="JScript">
function hover() {
element.className += "hover";
}
function unhover() {
element.className = element.className.replace(/hover/,"");
}
</script>And finally, you will need another class in your CSStr.row1hover {
background-color: #f1f1f1;
behavior:url(IEHover.htc);
}What this behavior does is use Javascript to change the classname of the element when you hover over it, and change it back when you move off.
I am not really well versed in this approach, so I may have done something wrong in the above. Comments from my betters are welcome and appreciated.
You version has a few problems. See: <!-- w --><a class="postlink" href="http://www.vladdy.net/demos/iepseudoclassesfix.html">www.vladdy.net/demos/iepseudoclassesfix.html</a><!-- w -->
Ah, I see how it is supposed to be now; you're not so much changing the class name as you are adding a second class to the element.
Vladdy, you're so cool.
What I am trying is when I move my mouse over a table row its background color sholud change.For this I have the following style
tr.row1 {
background-color: #FFFFFF;
}
tr.row1:hover {
background-color: #f1f1f1;
}
This works in firefox but not in IEIn IE, CSS support is very poor. hover is only supported for the <a> tag. You can still get the effect to work, by using behaviors. To do this, you need a couple of things. First is a non-standard bit of code in the CSS:tr.row1 {
background-color: #FFFFFF;
behavior:url(IEHover.htc);
}Second is the file IEHover.htc<public:attach event="onmouseover" onevent="hover()" />
<public:attach event="onmouseout" onevent="unhover()" />
<script language="JScript">
function hover() {
element.className += "hover";
}
function unhover() {
element.className = element.className.replace(/hover/,"");
}
</script>And finally, you will need another class in your CSStr.row1hover {
background-color: #f1f1f1;
behavior:url(IEHover.htc);
}What this behavior does is use Javascript to change the classname of the element when you hover over it, and change it back when you move off.
I am not really well versed in this approach, so I may have done something wrong in the above. Comments from my betters are welcome and appreciated.Not that I normally jump to M$'s defense, but the CSS 2.1 spec for pseudo classes (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes">http://www.w3.org/TR/CSS21/selector.htm ... do-classes</a><!-- m -->) "doesn't define which elements may be in the above states [:hover, :active, or :focus]...".Not that I normally jump to M$'s defense, but the CSS 2.1 spec for pseudo classes (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes">http://www.w3.org/TR/CSS21/selector.htm ... do-classes</a><!-- m -->) "doesn't define which elements may be in the above states [:hover, :active, or :focus]...".
Therefore it applies to all.Therefore it applies to all.
I think if that's what they meant, then they would have said "it applies to all elements", not that it does not specify which elements, hmmmmm...???Why? The general rule is, you can legally do anything that you aren't explicitly disallowed from doing.In IE, CSS support is very poor. hover is only supported for the <a> tag. You can still get the effect to work, by using behaviors. To do this, you need a couple of things. First is a non-standard bit of code in the CSS:tr.row1 {
background-color: #FFFFFF;
behavior:url(IEHover.htc);
}Second is the file IEHover.htc<public:attach event="onmouseover" onevent="hover()" />
<public:attach event="onmouseout" onevent="unhover()" />
<script language="JScript">
function hover() {
element.className += "hover";
}
function unhover() {
element.className = element.className.replace(/hover/,"");
}
</script>And finally, you will need another class in your CSStr.row1hover {
background-color: #f1f1f1;
behavior:url(IEHover.htc);
}What this behavior does is use Javascript to change the classname of the element when you hover over it, and change it back when you move off.
I am not really well versed in this approach, so I may have done something wrong in the above. Comments from my betters are welcome and appreciated.
You version has a few problems. See: <!-- w --><a class="postlink" href="http://www.vladdy.net/demos/iepseudoclassesfix.html">www.vladdy.net/demos/iepseudoclassesfix.html</a><!-- w -->
Ah, I see how it is supposed to be now; you're not so much changing the class name as you are adding a second class to the element.Vladdy, you're so cool.