javascript - javascript 变量的样式悬停状态

Question

我正在尝试为我创建的变量设置悬停状态的样式。我对 javascript 还很陌生，所以希望你们中的一个人可以帮助我。

这是脚本:

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);

我想要做的是编写脚本，当鼠标悬停在由变量 controlUI 创建的 div 上时，为该 div 设置不同的样式属性。

Answer 1

由于您纯粹使用 JavaScript，而不是 CSS，因此您需要以困难的方式完成此操作，即使用事件。使用 jQuery，它将是:

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

如果没有 jQuery，您将需要使用 DOM 事件，这很痛苦，因为它们不能与 IE 9 以下的跨浏览器兼容，如 discussed extensively in this MDC article 。代码最终看起来像这样:

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

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