How to have hover effects on input boxes in Internet Explorer 6

Question

Hey,

Im looking how to have hover effects on input boxes in Internet Explorer 6? Im using YUI if I can utilise that.

Thanks

Answer 1

Try this javascript:

var inputs = document.getElementsByTagName("input");
var hoverOn = function() {
    this.className = "hover";
};
var hoverOff = function() {
    this.className = "";
};
for (var i = 0, l = inputs.length; i < l; ++i) {
    inputs[i].onmouseover = hoverOn; 
    inputs[i].onmouseout = hoverOff;
}

And the CSS:

input.hover {
    background-color: #f0f;
}

Here's the above, which works in Firefox... let me know how IE6 goes... http://jsbin.com/aseli

Answer 2

HTML:

<input type="text" id="elementid" />

JS:

var oElement = document.getElementById("elementid"); 
function fnCallback(e) { alert("mouse over"); } 
YAHOO.util.Event.addListener(oElement, "mouseover", fnCallback);

Taken from http://developer.yahoo.com/yui/event/#start