Question

I am attempting to style a hover state of a variable I have created. I’m pretty new to javascript, so hopefully one of you can help me out.

here is the script:

controlDiv.style.padding = '5px';

var controlUI = document.createElement('DIV');
controlUI.style.height = '19px';
controlUI.style.backgroundColor = '#F9F9F9';
controlUI.style.background = 'linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%)';
controlUI.style.boxShadow = '2px 2px 2px 1px #999';
controlUI.style.borderRadius = '2px';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '1px';
controlUI.style.borderColor = '#9BADCF';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click Me';
controlDiv.appendChild(controlUI);

what I am wanting to do is to write script to set different style properties for the div created by the variable controlUI, when the mouse hovers over said div.

Answer 1

Since you are working purely with JavaScript, instead of with CSS, you will need to do this the hard way, namely with events. With jQuery, it would be:

$(controlUI).hover(
    function onMouseEnter() {
        this.style.backgroundColor = "blue";
    },
    function onMouseLeave() {
        this.style.backgroundColor = "#F9F9F9";
    }
);

Without jQuery, you would need to use DOM events, which is a pain because they are not cross-browser compatible with IE less than 9, as discussed extensively in this MDC article. The code ends up looking something like:

var crossBrowserAEL = controlUI.addEventListener ? "addEventListener" : "attachEvent";

controlUI[crossBrowserAEL]("mouseover", function () {
    controlUI.style.backgroundColor = "blue";
});
controlUI[crossBrowserAEL]("mouseout", function () {
    controlUI.style.backgroundColor = "#F9F9F9";
});