Change hover CSS properties with JavaScript

Question

How can JavaScript change CSS  hover properties  For example  HTML  lt table gt     lt tr gt       lt td gt Hover 1 lt  td gt       lt td gt Hover 2 lt  td gt     lt  tr gt   lt  table gt   CSS table td hover   background  ff0000     How can the td  hover properties be modified to  say  background  00ff00  with JavaScript  I know I could access the style background property using JavaScript with  document getElementsByTagName  quot td quot   style background  quot  00ff00 quot    But I don t know of a  style JavaScript equivalent for  hover

User · Answer

I d recommend to replace all  hover properties to  active when you detect that device supports touch  Just call this function when you do so as touch       function touch           if   ontouchstart  in document documentElement            for  var sheetI   document styleSheets length - 1  sheetI  gt   0  sheetI--              var sheet   document styleSheets sheetI             if  sheet cssRules                for  var ruleI   sheet cssRules length - 1  ruleI  gt   0  ruleI--                  var rule   sheet cssRules ruleI                  if  rule selectorText                    rule selectorText   rule selectorText replace   hover     active

User · Answer

If you use lightweight html ux lang  check here an example  write  div root   onmouseover   ev   gt   root style backgroundColor  red     onmouseleave   ev   gt   root style backgroundColor  initial    The code above performes the css  hover metatag

User · Answer

Pretty old question so I figured I ll add a more modern answer  Now that CSS variables are widely supported they can be used to achieve this without the need for JS events or  important   Taking the OP s example    lt table gt     lt tr gt       lt td gt Hover 1 lt  td gt       lt td gt Hover 2 lt  td gt     lt  tr gt   lt  table gt    We can now do this in the CSS   table td hover        fallback in case we need to support older non-supported browsers  IE  Opera mini    background   ff0000    background  var --td-background-color       And add the hover state using javascript like so   const tds   document querySelectorAll  td    tds forEach  td    gt      td style setProperty  --td-background-color     00ff00          Here s a working example https   codepen io ybentz pen RwPoeqb

User · Answer

Sorry to find this page 7 years too late  but here is a much simpler way to solve this problem  changing hover styles arbitrarily    HTML    lt button id Button gt Button Title lt  button gt    CSS    HoverClass1 hover  color  blue  important  background-color  green  important    HoverClass2 hover  color  red  important  background-color  yellow  important     JavaScript   var Button document getElementById  Button       Clear all previous hover classes    Button classList remove  HoverClass1   HoverClass2       Set the desired hover class    Button classList add  HoverClass1

User · Answer

I had this need once and created a small library for  which maintains the CSS documents   https   github com terotests css  With that you can state  css   bind  TD hover              background     00ff00            It uses the techniques mentioned above and also tries to take care of the cross-browser issues  If there for some reason exists an old browser like IE9 it will limit the number of STYLE tags  because the older IE browser had this strange limit for number of STYLE tags available on the page   Also  it limits the traffic to the tags by updating tags only periodically  There is also a limited support for creating animation classes

User · Answer

You can use mouse events to control like hover  For example  the following code is making visible when you hover that element  var foo   document getElementById  quot foo quot    foo addEventListener  mouseover  function       foo style display  quot block quot      foo addEventListener  mouseleave  function       foo style display  quot none quot

User · Answer

Declare a global var   var td   Then select your guiena pig  lt td gt  getting it by its id  if you want to change all of them then  window onload   function        td   document getElementsByTagName  td         Make a function to be triggered and a loop to change all of your desired td s  function trigger         for var x   0  x  lt  td length  x             td x  className    yournewclass              Go to your CSS Sheet    yournewclass hover   background-color   00ff00      And that is it  with this you are able to to make all your  lt td gt  tags get a background-color   00ff00  when hovered by changing its css propriety directly  switching between css classes

User · Answer

This is not actually adding the CSS to the cell  but gives the same effect   While providing the same result as others above  this version is a little more intuitive to me  but I m a novice  so take it for what it s worth       hoverCell   bind  mouseover   function         var old color     this  css  background-color          this  0  style backgroundColor     ffff00            hoverCell   bind  mouseout   function                this  0  style backgroundColor   old color                This requires setting the Class for each of the cells you want to highlight to  hoverCell

User · Answer

You can t change or alter the actual  hover selector through Javascript  You can  however  use mouseenter to change the style  and revert back on mouseleave  thanks   Bryan

User · Answer

You can make a CSS variable  and then change it in JS    root     --variableName   variableValue       to change it in JS  I made these handy little functions   var cssVarGet   function name      return getComputedStyle document documentElement  getPropertyValue name        and  var cssVarSet   function name  val      document documentElement style setProperty name  val        You can make as many CSS variables as you want  and I haven t found any bugs in the functions  After that  all you have to do is embed it in your CSS   table td hover     background  var --variableName       And then bam  a solution that just requires some CSS and 2 JS functions

User · Answer

Had some same problems  used addEventListener for events  quot mousenter quot    quot mouseleave quot   let DOMelement   document querySelector  CSS selector for your HTML element        if you want to change e g color   let origColorStyle   DOMelement style color   DOMelement addEventListener  quot mouseenter quot    event    gt    event target style color    quot red quot       DOMelement addEventListener  quot mouseleave quot    event    gt    event target style color   origColorStyle     Or something else for style when cursor is above the DOMelement  DOMElement can be chosen by various ways

User · Answer

Pseudo classes like  hover never refer to an element  but to any element that satisfies the conditions of the stylesheet rule  You need to edit the stylesheet rule  append a new rule  or add a new stylesheet that includes the new  hover rule   var css    table td hover  background-color   00ff00     var style   document createElement  style     if  style styleSheet        style styleSheet cssText   css    else       style appendChild document createTextNode css       document getElementsByTagName  head   0  appendChild style

User · Answer

What you can do is change the class of your object and define two classes with different hover properties  For example    stategood enabled hover    background-color green   stategood enabled          background-color black   stategood disabled hover   background-color red   stategood disabled         background-color black    And this I found on  Change an element  39 s class with JavaScript  function changeClass object oldClass newClass           remove        object className   object className replace         s oldClass    S  g                replace      var regExp   new RegExp         s     oldClass         S     g        object className   object className replace  regExp   newClass           add       object className        newClass     changeClass myInput submit  stategood disabled    stategood enabled

User · Answer

If it fits your purpose you can add the hover functionality without using css and using the onmouseover event in javascript   Here is a code snippet   lt div id  mydiv  gt foo lt  div gt    lt script gt  document getElementById  mydiv   onmouseover   function          this style backgroundColor    blue      lt  script gt

[javascript] Change :hover CSS properties with JavaScript

Examples related to javascript

Examples related to html

Examples related to css

Examples related to dhtml