jQuery hover and class selector

Question

I wan t to change the background color of a div dynamicly using the following HTML  CSS and javascript  HTML   lt div id  quot menu quot  gt       lt div class  quot menuItem quot  gt  lt a href   gt Bla lt  a gt  lt  div gt       lt div class  quot menuItem quot  gt  lt a href   gt Bla lt  a gt  lt  div gt       lt div class  quot menuItem quot  gt  lt a href   gt Bla lt  a gt  lt  div gt   lt  div gt   CSS   menuItem    display inline    height 30px    width 100px    background-color  000     Javascript      menuItem   hover  function           this  css  background-color     F00       function           this  css  background-color     000         EDIT  I forgot to say that I had reasons not to want to use the css way  And I indeed forgot to check if the DOM was loaded

User · Answer

If someone reads the original question to mean that they want to dynamically change the hover css and not just change the base css rule for the element, I've found this to work:

I have a dynamically loaded page that requires me to find out how high the container becomes after data is loaded. Once loaded, I want to change the hover effect of the css so that an element covers the resulting container. I need to change the css .daymark:hover rule to have a new height. This is how...

function changeAttr(attrName,changeThis,toThis){
    var mysheet=document.styleSheets[1], targetrule;
    var myrules=mysheet.cssRules? mysheet.cssRules: mysheet.rules;

    for (i=0; i<myrules.length; i++){
        if(myrules[i].selectorText.toLowerCase()==".daymark:hover"){ //find "a:hover" rule
            targetrule=myrules[i];
            break;
        }
    }
    switch(changeThis)
    {
        case "height":
            targetrule.style.height=toThis+"px";
            break;
        case "width":
            targetrule.style.width=toThis+"px";
            break;
    }

}

User · Answer

I just coded up an example in jQuery on how to create div overlays over radio buttons to create a compact  interactive but simple color selector plug-in for jQuery  http   blarnee com wp jquery-colour-selector-plug-in-with-support-for-graceful-degradation

User · Answer

Always keep things easy and simple by creating a class   bcolor  background  F00     THEN USE THE addClass    amp  removeClass   to finish it up

User · Answer

Your code looks fine to me   Make sure the DOM is ready before your javascript is executed by using jQuery s   callback  function     function            menuItem   hover  function            this  css  background-color     F00             function            this  css  background-color     000

User · Answer

On a side note this is more efficient       menuItem   hover function        this style backgroundColor     F00      function         this style backgroundColor     000

User · Answer

test html   lt  xml version  1 0  encoding  UTF-8   gt   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN    http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  gt       lt head gt           lt title gt jQuery Test lt  title gt           lt link rel  stylesheet  type  text css  href  test css    gt           lt script type  text javascript  src  jquery js  gt  lt  script gt           lt script type  text javascript  src  test js  gt  lt  script gt       lt  head gt       lt body gt           lt div id  menu  gt               lt div class  menuItem  gt  lt a href   gt Bla lt  a gt  lt  div gt               lt div class  menuItem  gt  lt a href   gt Bla lt  a gt  lt  div gt               lt div class  menuItem  gt  lt a href   gt Bla lt  a gt  lt  div gt           lt  div gt       lt  body gt   lt  html gt    test css   menuItem        display  inline      height  30px      width  100px      background-color   000       test js     function             menuItem   hover  function               this  css  background-color     F00                function               this  css  background-color     000                    Works  -

User · Answer

I prefer foxy s answer because we should never use javascript when existing css properties are made for the job   Don t forget to add display  block   in  menuItem  so height and width are taken into account   edit   for better script look amp feel decoupling  if you ever need to change style through jQuery I d define an additional css class and use        addClass  myclass   and        removeClass  myclass

User · Answer

Your code looks fine to me   Make sure the DOM is ready before your javascript is executed by using jQuery s   callback  function     function            menuItem   hover  function            this  css  background-color     F00             function            this  css  background-color     000

User · Answer

Your code looks fine to me   Make sure the DOM is ready before your javascript is executed by using jQuery s   callback  function     function            menuItem   hover  function            this  css  background-color     F00             function            this  css  background-color     000

User · Answer

I would suggest not to use JavaScript for this kind of simple interaction  CSS is capable of doing it  even in Internet Explorer 6  and it will be much more responsive than doing it with JavaScript   You can use the   hover  CSS pseudo-class but in order to make it work with Internet Explorer 6  you must use it on an  a  element    menuItem       display  inline      background-color   000          width and height should not work on inline elements           if this works  your browser is doing the rendering            in quirks mode which will not be compatible with              other browsers - but this will not work on touch mobile devices like android        menuItem a hover        background-color  F00

User · Answer

I would suggest not to use JavaScript for this kind of simple interaction  CSS is capable of doing it  even in Internet Explorer 6  and it will be much more responsive than doing it with JavaScript   You can use the   hover  CSS pseudo-class but in order to make it work with Internet Explorer 6  you must use it on an  a  element    menuItem       display  inline      background-color   000          width and height should not work on inline elements           if this works  your browser is doing the rendering            in quirks mode which will not be compatible with              other browsers - but this will not work on touch mobile devices like android        menuItem a hover        background-color  F00

User · Answer

Always keep things easy and simple by creating a class   bcolor  background  F00     THEN USE THE addClass    amp  removeClass   to finish it up

User · Answer

test html   lt  xml version  1 0  encoding  UTF-8   gt   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN    http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  gt       lt head gt           lt title gt jQuery Test lt  title gt           lt link rel  stylesheet  type  text css  href  test css    gt           lt script type  text javascript  src  jquery js  gt  lt  script gt           lt script type  text javascript  src  test js  gt  lt  script gt       lt  head gt       lt body gt           lt div id  menu  gt               lt div class  menuItem  gt  lt a href   gt Bla lt  a gt  lt  div gt               lt div class  menuItem  gt  lt a href   gt Bla lt  a gt  lt  div gt               lt div class  menuItem  gt  lt a href   gt Bla lt  a gt  lt  div gt           lt  div gt       lt  body gt   lt  html gt    test css   menuItem        display  inline      height  30px      width  100px      background-color   000       test js     function             menuItem   hover  function               this  css  background-color     F00                function               this  css  background-color     000                    Works  -

User · Answer

On a side note this is more efficient       menuItem   hover function        this style backgroundColor     F00      function         this style backgroundColor     000

User · Answer

test html   lt  xml version  1 0  encoding  UTF-8   gt   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN    http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  gt       lt head gt           lt title gt jQuery Test lt  title gt           lt link rel  stylesheet  type  text css  href  test css    gt           lt script type  text javascript  src  jquery js  gt  lt  script gt           lt script type  text javascript  src  test js  gt  lt  script gt       lt  head gt       lt body gt           lt div id  menu  gt               lt div class  menuItem  gt  lt a href   gt Bla lt  a gt  lt  div gt               lt div class  menuItem  gt  lt a href   gt Bla lt  a gt  lt  div gt               lt div class  menuItem  gt  lt a href   gt Bla lt  a gt  lt  div gt           lt  div gt       lt  body gt   lt  html gt    test css   menuItem        display  inline      height  30px      width  100px      background-color   000       test js     function             menuItem   hover  function               this  css  background-color     F00                function               this  css  background-color     000                    Works  -

User · Answer

I would suggest not to use JavaScript for this kind of simple interaction  CSS is capable of doing it  even in Internet Explorer 6  and it will be much more responsive than doing it with JavaScript   You can use the   hover  CSS pseudo-class but in order to make it work with Internet Explorer 6  you must use it on an  a  element    menuItem       display  inline      background-color   000          width and height should not work on inline elements           if this works  your browser is doing the rendering            in quirks mode which will not be compatible with              other browsers - but this will not work on touch mobile devices like android        menuItem a hover        background-color  F00

User · Answer

This can be achieved in CSS using the  hover pseudo-class    hover doesn t work on  lt div gt s in IE6   HTML    lt div id  menu  gt      lt a class  menuItem  href   gt Bla lt  a gt      lt a class  menuItem  href   gt Bla lt  a gt      lt a class  menuItem  href   gt Bla lt  a gt   lt  div gt    CSS    menuItem    height 30px    width 100px    background-color  000     menuItem hover     background-color  F00

User · Answer

Since this is a menu  might as well take it to the next level  and clean up the HTML  and make it more semantic by using a list element   HTML      lt ul id  menu  gt       lt li gt  lt a href     gt Bla lt  a gt  lt  li gt       lt li gt  lt a href     gt Bla lt  a gt  lt  li gt       lt li gt  lt a href     gt Bla lt  a gt  lt  li gt     lt  ul gt    CSS    menu     margin  0     menu li     float  left    list-style  none    margin  0     menu li a     display  block    line-height 30px    width 100px    background-color  000     menu li a hover     background-color  F00

User · Answer

I prefer foxy s answer because we should never use javascript when existing css properties are made for the job   Don t forget to add display  block   in  menuItem  so height and width are taken into account   edit   for better script look amp feel decoupling  if you ever need to change style through jQuery I d define an additional css class and use        addClass  myclass   and        removeClass  myclass

User · Answer

I would suggest not to use JavaScript for this kind of simple interaction  CSS is capable of doing it  even in Internet Explorer 6  and it will be much more responsive than doing it with JavaScript   You can use the   hover  CSS pseudo-class but in order to make it work with Internet Explorer 6  you must use it on an  a  element    menuItem       display  inline      background-color   000          width and height should not work on inline elements           if this works  your browser is doing the rendering            in quirks mode which will not be compatible with              other browsers - but this will not work on touch mobile devices like android        menuItem a hover        background-color  F00

User · Answer

This can be achieved in CSS using the  hover pseudo-class    hover doesn t work on  lt div gt s in IE6   HTML    lt div id  menu  gt      lt a class  menuItem  href   gt Bla lt  a gt      lt a class  menuItem  href   gt Bla lt  a gt      lt a class  menuItem  href   gt Bla lt  a gt   lt  div gt    CSS    menuItem    height 30px    width 100px    background-color  000     menuItem hover     background-color  F00

User · Answer

Since this is a menu  might as well take it to the next level  and clean up the HTML  and make it more semantic by using a list element   HTML      lt ul id  menu  gt       lt li gt  lt a href     gt Bla lt  a gt  lt  li gt       lt li gt  lt a href     gt Bla lt  a gt  lt  li gt       lt li gt  lt a href     gt Bla lt  a gt  lt  li gt     lt  ul gt    CSS    menu     margin  0     menu li     float  left    list-style  none    margin  0     menu li a     display  block    line-height 30px    width 100px    background-color  000     menu li a hover     background-color  F00

User · Answer

I prefer foxy s answer because we should never use javascript when existing css properties are made for the job   Don t forget to add display  block   in  menuItem  so height and width are taken into account   edit   for better script look amp feel decoupling  if you ever need to change style through jQuery I d define an additional css class and use        addClass  myclass   and        removeClass  myclass

User · Answer

This can be achieved in CSS using the  hover pseudo-class    hover doesn t work on  lt div gt s in IE6   HTML    lt div id  menu  gt      lt a class  menuItem  href   gt Bla lt  a gt      lt a class  menuItem  href   gt Bla lt  a gt      lt a class  menuItem  href   gt Bla lt  a gt   lt  div gt    CSS    menuItem    height 30px    width 100px    background-color  000     menuItem hover     background-color  F00

User · Answer

I just coded up an example in jQuery on how to create div overlays over radio buttons to create a compact  interactive but simple color selector plug-in for jQuery  http   blarnee com wp jquery-colour-selector-plug-in-with-support-for-graceful-degradation

User · Answer

On a side note this is more efficient       menuItem   hover function        this style backgroundColor     F00      function         this style backgroundColor     000

User · Answer

I prefer foxy s answer because we should never use javascript when existing css properties are made for the job   Don t forget to add display  block   in  menuItem  so height and width are taken into account   edit   for better script look amp feel decoupling  if you ever need to change style through jQuery I d define an additional css class and use        addClass  myclass   and        removeClass  myclass

User · Answer

Since this is a menu  might as well take it to the next level  and clean up the HTML  and make it more semantic by using a list element   HTML      lt ul id  menu  gt       lt li gt  lt a href     gt Bla lt  a gt  lt  li gt       lt li gt  lt a href     gt Bla lt  a gt  lt  li gt       lt li gt  lt a href     gt Bla lt  a gt  lt  li gt     lt  ul gt    CSS    menu     margin  0     menu li     float  left    list-style  none    margin  0     menu li a     display  block    line-height 30px    width 100px    background-color  000     menu li a hover     background-color  F00

User · Answer

Your code looks fine to me   Make sure the DOM is ready before your javascript is executed by using jQuery s   callback  function     function            menuItem   hover  function            this  css  background-color     F00             function            this  css  background-color     000

User · Answer

This can be achieved in CSS using the  hover pseudo-class    hover doesn t work on  lt div gt s in IE6   HTML    lt div id  menu  gt      lt a class  menuItem  href   gt Bla lt  a gt      lt a class  menuItem  href   gt Bla lt  a gt      lt a class  menuItem  href   gt Bla lt  a gt   lt  div gt    CSS    menuItem    height 30px    width 100px    background-color  000     menuItem hover     background-color  F00

User · Answer

test html   lt  xml version  1 0  encoding  UTF-8   gt   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN    http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  gt       lt head gt           lt title gt jQuery Test lt  title gt           lt link rel  stylesheet  type  text css  href  test css    gt           lt script type  text javascript  src  jquery js  gt  lt  script gt           lt script type  text javascript  src  test js  gt  lt  script gt       lt  head gt       lt body gt           lt div id  menu  gt               lt div class  menuItem  gt  lt a href   gt Bla lt  a gt  lt  div gt               lt div class  menuItem  gt  lt a href   gt Bla lt  a gt  lt  div gt               lt div class  menuItem  gt  lt a href   gt Bla lt  a gt  lt  div gt           lt  div gt       lt  body gt   lt  html gt    test css   menuItem        display  inline      height  30px      width  100px      background-color   000       test js     function             menuItem   hover  function               this  css  background-color     F00                function               this  css  background-color     000                    Works  -

User · Answer

On a side note this is more efficient       menuItem   hover function        this style backgroundColor     F00      function         this style backgroundColor     000

User · Answer

If someone reads the original question to mean that they want to dynamically change the hover css and not just change the base css rule for the element, I've found this to work:

I have a dynamically loaded page that requires me to find out how high the container becomes after data is loaded. Once loaded, I want to change the hover effect of the css so that an element covers the resulting container. I need to change the css .daymark:hover rule to have a new height. This is how...

function changeAttr(attrName,changeThis,toThis){
    var mysheet=document.styleSheets[1], targetrule;
    var myrules=mysheet.cssRules? mysheet.cssRules: mysheet.rules;

    for (i=0; i<myrules.length; i++){
        if(myrules[i].selectorText.toLowerCase()==".daymark:hover"){ //find "a:hover" rule
            targetrule=myrules[i];
            break;
        }
    }
    switch(changeThis)
    {
        case "height":
            targetrule.style.height=toThis+"px";
            break;
        case "width":
            targetrule.style.width=toThis+"px";
            break;
    }

}

User · Answer

Since this is a menu  might as well take it to the next level  and clean up the HTML  and make it more semantic by using a list element   HTML      lt ul id  menu  gt       lt li gt  lt a href     gt Bla lt  a gt  lt  li gt       lt li gt  lt a href     gt Bla lt  a gt  lt  li gt       lt li gt  lt a href     gt Bla lt  a gt  lt  li gt     lt  ul gt    CSS    menu     margin  0     menu li     float  left    list-style  none    margin  0     menu li a     display  block    line-height 30px    width 100px    background-color  000     menu li a hover     background-color  F00

[javascript] jQuery hover and class selector

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css