admin管理员组

文章数量:1024582

Is there any way to add hover on all elements in html (div,p,span,a...) I'm trying like this:

$("*").hover(
      function () {
              $(this).addClass('hover'); ;
      },
      function () {
              $(this).removeClass('hover');
      }
    );

and CSS

#hover {
     background-color:#CC0000;
}

but somewhere there is an error???

Is there any way to add hover on all elements in html (div,p,span,a...) I'm trying like this:

$("*").hover(
      function () {
              $(this).addClass('hover'); ;
      },
      function () {
              $(this).removeClass('hover');
      }
    );

and CSS

#hover {
     background-color:#CC0000;
}

but somewhere there is an error???

  • javascript
  • jquery
  • html
  • hover
Share Improve this question edited Feb 1, 2015 at 16:36 Deduplicator 45.8k7 gold badges72 silver badges123 bronze badges asked Dec 10, 2011 at 20:27 JO JOJOJO JOJO 1059 bronze badges 7
  • 1 Why do this with javascript? Can't you just use the pseudo class :hover and do this entirely with CSS? We'd need to see relevant HTML and which elements you want this on to advise more specifically. It's rare to actually want all elements in the page (including body and all containers) to have the same behavior as that would likely look odd and probably not do what you want. – jfriend00 Commented Dec 10, 2011 at 20:33
  • 1 *:hover { background-color: #CC0000; } would be a lot simpler and more efficient. – Quentin Commented Dec 10, 2011 at 20:33
  • I currenly build an app who will get xpath location from html code but now i want when user hover element to change background to know what element is select. – JO JOJO Commented Dec 10, 2011 at 20:39
  • @JOJOJO Don't use the global selector then, just use it for the elements you want. Otherwise you <body>, and other unwanted elements will have it applied. – jli Commented Dec 10, 2011 at 20:41
  • :) but i need this for all element (div,span,p,a) – JO JOJO Commented Dec 10, 2011 at 20:44
 |  Show 2 more ments

3 Answers 3

Reset to default 6

You should be using a . rather than a # to denote a class selector.

.hover {
    background-color:#CC0000;
}

Also, note that using * as a jQuery selector will select everything, including the body element etc. I'm not sure from the context of the question whether this is what you're after or not.

Furthermore, it would be easier to just use the CSS pseudo-class :hover to apply a style to a hovered element. Here's a reference for how to use it: http://reference.sitepoint./css/pseudoclass-hover

You adding class "hover", but using CSS # selector for ids, use .hover instead of #hover

jlis solution will work, but there is a better way:

Use the css pseudo class ":hover" instead:

*:hover {
     background-color: #CC0000;
}

should work with most mon and actual browsers.

(IE 6 is not an actual or mon browser!)

Is there any way to add hover on all elements in html (div,p,span,a...) I'm trying like this:

$("*").hover(
      function () {
              $(this).addClass('hover'); ;
      },
      function () {
              $(this).removeClass('hover');
      }
    );

and CSS

#hover {
     background-color:#CC0000;
}

but somewhere there is an error???

Is there any way to add hover on all elements in html (div,p,span,a...) I'm trying like this:

$("*").hover(
      function () {
              $(this).addClass('hover'); ;
      },
      function () {
              $(this).removeClass('hover');
      }
    );

and CSS

#hover {
     background-color:#CC0000;
}

but somewhere there is an error???

  • javascript
  • jquery
  • html
  • hover
Share Improve this question edited Feb 1, 2015 at 16:36 Deduplicator 45.8k7 gold badges72 silver badges123 bronze badges asked Dec 10, 2011 at 20:27 JO JOJOJO JOJO 1059 bronze badges 7
  • 1 Why do this with javascript? Can't you just use the pseudo class :hover and do this entirely with CSS? We'd need to see relevant HTML and which elements you want this on to advise more specifically. It's rare to actually want all elements in the page (including body and all containers) to have the same behavior as that would likely look odd and probably not do what you want. – jfriend00 Commented Dec 10, 2011 at 20:33
  • 1 *:hover { background-color: #CC0000; } would be a lot simpler and more efficient. – Quentin Commented Dec 10, 2011 at 20:33
  • I currenly build an app who will get xpath location from html code but now i want when user hover element to change background to know what element is select. – JO JOJO Commented Dec 10, 2011 at 20:39
  • @JOJOJO Don't use the global selector then, just use it for the elements you want. Otherwise you <body>, and other unwanted elements will have it applied. – jli Commented Dec 10, 2011 at 20:41
  • :) but i need this for all element (div,span,p,a) – JO JOJO Commented Dec 10, 2011 at 20:44
 |  Show 2 more ments

3 Answers 3

Reset to default 6

You should be using a . rather than a # to denote a class selector.

.hover {
    background-color:#CC0000;
}

Also, note that using * as a jQuery selector will select everything, including the body element etc. I'm not sure from the context of the question whether this is what you're after or not.

Furthermore, it would be easier to just use the CSS pseudo-class :hover to apply a style to a hovered element. Here's a reference for how to use it: http://reference.sitepoint./css/pseudoclass-hover

You adding class "hover", but using CSS # selector for ids, use .hover instead of #hover

jlis solution will work, but there is a better way:

Use the css pseudo class ":hover" instead:

*:hover {
     background-color: #CC0000;
}

should work with most mon and actual browsers.

(IE 6 is not an actual or mon browser!)

本文标签： javascriptHover all element in htmlStack Overflow

版权声明：本文标题：javascript - Hover all element in html - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745610920a2158998.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。