向孩子添加一个类，然后影响父元素

Question

我想在我徘徊的所有元素中添加类。 但是我正在使用jQuery代码。 但是当我将鼠标悬停在所有父类上的元素类会自动添加时，任何人都可以建议我如何在我实际上悬停的元素中添加类。

我的js代码是

$(AllTags).mouseover(function(e){
 e.stopPropagation();
    $(this).addClass('g-hovered');
});
$(AllTags).mouseenter(function(e){
 e.stopPropagation();
    $(this).removeClass('g-hovered');
});

var AllTags = "div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video,article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section "

我不想传递任何特定的类和标签。

Answer 1

看看这个小提琴。 这是您想要实现的目标吗？

http://jsfiddle.net/k398G/5/

var allTags = "div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video,article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section";

$(allTags).on('mouseover', function(e) {
    e.stopPropagation();
    $(this).addClass('g-hovered');
});

Answer 2

这是使用javascript完成的操作： 演示

var allTags = ['div', 'span', 'applet', 'object', 'iframe','h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'blockquote', 'pre', 'a', 'abbr', 'acronym', 'address', 'big', 'cite', 'code','del', 'dfn', 'em', 'img', 'ins', 'kbd', 'q', 's', 'samp','small', 'strike', 'strong', 'sub', 'sup', 'tt', 'var','b', 'u', 'i', 'center','dl', 'dt', 'dd', 'ol', 'ul', 'li','fieldset', 'form', 'label', 'legend','table', 'caption', 'tbody', 'tfoot', 'thead', 'tr', 'th', 'td','article', 'aside', 'canvas', 'details', 'embed', 'figure', 'figcaption', 'footer', 'header', 'hgroup', 'menu', 'nav', 'output', 'ruby', 'section', 'summary','time', 'mark', 'audio', 'video','article', 'aside', 'details', 'figcaption', 'figure', 'footer', 'header', 'hgroup', 'menu', 'nav', 'section'];


 var j=0;

 window.onmouseover = function() {
                change();
            };



 function classAdd(element) {
      return function() { element.setAttribute('class','first');
                     };
          }

 function classRemove(element) {
       return function() { element.removeAttribute('class','first');  
              };
           }  

 function change() {

      for (var i=0; i<allTags.length; i++) {

        var element=document.getElementsByTagName(allTags[i]);

          for (j=0;j<element.length;j++) {
            element[j].onmouseover = classAdd(element[j]);

            element[j].onmouseout = classRemove(element[j]);
                                   }
                        } 
               }