在没有jquery库的情况下使用jQuery hover?

时间:2013-07-11 19:57:37

标签: javascript jquery

有没有办法使用以下代码:

$(document).ready(function () {

    $('sd').hover(function() {
      $(this).addClass('a');
    }, function() {
      $(this).removeClass('a');
    });
});

我的代码中没有包含jquery文件?例如,有没有办法用纯javascript做同样的事情?

1 个答案:

答案 0 :(得分:13)

当然,从这个答案修改:Change an element's class with JavaScript

window.onload = function() {
    var elements = document.getElementsByTagName('sd');
    for (var i in elements) {
        if (!elements.hasOwnProperty(i)) continue;
        elements[i].addEventListener( 'mouseover', function() {
            this.className += 'a';
        }
        elements[i].addEventListener( 'mouseout', function() {
            this.className = this.className.replace( /(?:^|\s)a(?!\S)/g , '' );
        }
    }
}