How to write a hover in inline CSS

Question

I have a case where I must write inline CSS code  and I want to apply a hover style on an anchor   How can I use a hover in inline CSS inside the HTML style attribute   E g  you can t reliably use CSS classes in HTML emails

User · Answer

While the  quot you shouldn t quot  context may apply there may be cases were you still want to achieve this  My use case was to dynamic set a hover color depending on some data value to achieve that with only CSS you can benefit from specificity  Approach CSS only CSS     Set your parent color for the inherit property     sidebar     color  green        Make sure your target element  quot inherit quot  parent color on  hover and default     list-item a     color  inherit     list-item a hover     color  inherit       Create a class to allows to get hover color from inline style     dynamic-hover-color not  hover      color  inherit  important     Then your markup will be somewhat like  Markup  lt nav class  quot sidebar quot  gt     lt ul gt       lt li class  quot list-item quot  gt         lt a         href  quot  foo quot          class  quot dynamic-hover-color quot          style  quot color     category color    quot         gt          Category        lt  a gt       lt  li gt     lt  ul gt   lt  nav gt    I m doing this example using handlebars but the idea is that you take whatever is convenient for your use case to set the inline style  even if it is writing manually the color on hover you want

User · Answer

Short answer  you can t   Long answer  you shouldn t    Give it a class name or an id and use stylesheets to apply the style    hover is a pseudo-selector and  for CSS  only has meaning within the style sheet  There isn t any inline-style equivalent  as it isn t defining the selection criteria     Response to the OP s comments   See Totally Pwn CSS with Javascript for a good script on adding CSS rules dynamically  Also see Change style sheet for some of the theory on the subject   Also  don t forget  you can add links to external stylesheets if that s an option  For example    lt script type  text javascript  gt    var link   document createElement  link      link setAttribute  rel   stylesheet      link setAttribute  href   http   wherever com yourstylesheet css      var head   document getElementsByTagName  head   0     head appendChild link    lt  script gt    Caution  the above assumes there is a head section

User · Answer

You can do this  But not in inline styles  You can use onmouseover and onmouseout events    x000D   x000D   lt div style  background   333  padding  10px  cursor  pointer  x000D     onmouseover  this style backgroundColor   555    onmouseout  this style backgroundColor   333    gt  x000D        Hover on me  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

According to your comments  you re sending a JavaScript file anyway  Do the rollover in JavaScript  jQuery s   hover   method makes it easy  as does every other JavaScript wrapper  It s not too hard in straight JavaScript either

User · Answer

So this isn t quite what the user was looking for  but I found this question searching for an answer and came up with something sort of related   I had a bunch of repeating elements that needed a new color hover for a tab within them   I use handlebars  which is key to my solution  but other templateing languages may also work     I defined some colors and passed them into the handlebars template for each element   At the top of the template I defined a style tag  and put in my custom class and hover color    lt style type  text css  gt         chart type  -tab-hover hover           background-color    chart chartPrimaryHighlight    important         lt  style gt    Then I used the style in the template    lt span class  financial-aid-details-header-text   chart type  -tab-hover  gt     Payouts  lt  span gt    You may not need the  important

User · Answer

I m extremely late contributing to this  however I was sad to see no one suggested this  if you actually require inline code  this is possible to do  I needed it for some hover buttons  the method is this    x000D   x000D   hover-item   x000D   background-color   FFF  x000D    x000D   x000D   hover-item hover   x000D   background-color  inherit  x000D    x000D   lt a style  background-color  red   gt  x000D    lt div class  hover-item  gt  x000D    Content x000D    lt  div gt  x000D   lt  a x000D   x000D   x000D    In this case  the inline code   background-color  red   is the switch colour on hover  put the colour you need into there and then this solution works  I realise this may not be the perfect solution in terms of compatibility however this works if it is absolutely needed

User · Answer

There is no way to do this  Your options are to use a JavaScript or a CSS block   Maybe there is some JavaScript library that will convert a proprietary style attribute to a style block  But then the code will not be standard-compliant

User · Answer

You can do id by adding a class but never inline    lt style gt  hover pointer cursor pointer   lt  style gt   lt div class  hover pointer  style  font bold 12pt Verdana   gt Hello World lt  div gt    2 lines but you can re-use the class everywhere

User · Answer

using Javascript   a  Adding inline style   document head insertAdjacentHTML  beforeend     lt style gt  mydiv hover color red   lt  style gt       b  or a bit harder method - adding  mouseover   document getElementById  mydiv   onmouseover  function e  this className      my-special-class      document getElementById  mydiv   onmouseleave  function e  this className   this className replace  my-special-class              Note  multi-word styles  i e font-size  in Javascript are written together   element style fontSize  12px

User · Answer

You could do it at some point in the past  But now  according to the latest revision of the same standard  which is Candidate Recommendation  you can t

User · Answer

lt style gt a hover     lt  style gt   lt a href     gt Go Home lt  a gt    Hover is a pseudo class  and thus cannot be applied with a style attribute  It is part of the selector

User · Answer

I just figured out a different solution    My issue  I have an  lt a gt  tag around some slides main content viewer as well as  lt a gt  tags in the footer  I want them to go to the same place in IE  so the whole paragraph would be underlined onHover  even though they re not links  the slide as a whole is a link  IE doesn t know the difference  I also have some actual links in my footer that do need the underline and color change onHover  I thought I would have to put styles inline with the footer tags to make the color change  but advice from above suggests that this is impossible    Solution  I gave the footer links two different classes  and my problem was solved  I was able to have the onHover color change in one class  have the slides onHover have no color change underline  and still able to have the external HREFS in the footer and the slides at the same time

User · Answer

It s now possible with Hacss

User · Answer

As pointed out  you cannot set arbitrary inline styles for hover  but you can change the style of the hover cursor in CSS using the following in the appropriate tag   style  cursor  pointer

User · Answer

I agree with shadow  You could use the onmouseover and onmouseout event to change the CSS via JavaScript    And don t say people need to have JavaScript activated  It s only a style issue  so it doesn t matter if there are some visitors without JavaScript    Although most of Web 2 0 works with JavaScript  See Facebook for example  lots of JavaScript  or Myspace

User · Answer

Inline pseudoclass declarations aren t supported in the current iteration of CSS  though  from what I understand  it may come in a future version    For now  your best bet is probably to just define a style block directly above the link you want to style    lt style type  text css  gt       myLinkClass hover  text-decoration underline    lt  style gt   lt a href   foo  class  myLinkClass  gt Foo  lt  a gt

User · Answer

you can write a code in various type  first i can write this  html   lt a href  https   www google com   onMouseOver  this style color  red           onMouseOut  this style color  blue   class  one  gt Hello siraj lt  a gt     css   one    text-decoration  none      you can try another way  html   lt a href  https   www google com   class  one  gt Hello siraj lt  a gt    css   one  text-decoration  none      one hover  color blue      one active  color  red      you can also try hover in jquery  java script    document  ready function         p   hover function          this  css  background-color    yellow           function          this  css  background-color    pink                html   lt p gt Hover the mouse pointer over this paragraph  lt  p gt    in this code you have a three function in jquery first you ready a function which is the basic of function of jquery then second you have a hover function in this function when you hover a pointer to the text the color will be changed and then the next the when you release the pointer to the text it will be the different color and this is the third function

User · Answer

You can use the pseudo-class a hover in external style sheets only  Therefore I recommend using an external style sheet  The code is   a hover  color  FF00FF        Mouse-over link

User · Answer

You can get the same effect by changing your styles with JavaScript in the onMouseOver and onMouseOut parameters  although it s extremely inefficient if you need to change more than one element    x000D   x000D   lt a href  abc html  x000D     onMouseOver  this style color   0F0   x000D     onMouseOut  this style color   00F    gt Text lt  a gt  x000D   x000D   x000D    Also  I can t remember for sure if this works in this context  You may have to switch it with document getElementById  idForLink

User · Answer

I had to avoid javascript  but could go with server side code   so I generated an id  created a style block  generated the link with that id  Yes its valid HTML     x000D   x000D  a   x000D    text-decoration  none  x000D    color  blue   x000D    x000D   x000D  a hover   x000D    color  blue  x000D    font-weight  bold  x000D    x000D   lt  -- some code in the interpreter you use  to generate the data-hover id -- gt  x000D   lt style gt  x000D    a data-hover  rnd-id-123     color  green      x000D    a data-hover  rnd-id-123   hover   color  red    x000D   lt  style gt  x000D   lt a data-hover  rnd-id-123  gt some link 1 lt  a gt  x000D   x000D   lt br gt  x000D   x000D   lt  -- some code in the interpreter you use  to generate the data-hover id -- gt  x000D   lt style gt  x000D    a data-hover  rnd-id-456     color  purple     x000D    a data-hover  rnd-id-456   hover   color  orange    x000D   lt  style gt  x000D   lt a data-hover  rnd-id-456  gt some link 2 lt  a gt  x000D   x000D   x000D

User · Answer

This is the best code example    x000D   x000D   lt a x000D   style  color blue text-decoration  underline background  white   x000D   href  http   aashwin com index php education library   x000D   onmouseover  this style color   0F0   x000D   onmouseout  this style color   00F   gt  x000D     Library x000D   lt  a gt  x000D   x000D   x000D    Moderator Suggestion  Keep your separation of concerns   HTML  x000D   x000D   lt a x000D   style  color blue text-decoration  underline background  white   x000D   href  http   aashwin com index php education library   x000D   class  lib-link  gt  x000D     Library x000D   lt  a gt  x000D   x000D   x000D    JS   x000D   x000D  const libLink   document getElementsByClassName  lib-link   0   x000D     The array 0 assumes there is only one of these links  x000D     you would have to loop or use event delegation for multiples x000D     but we won t go into that here x000D  libLink onmouseover   function      x000D    this style color   0F0  x000D    x000D  libLink onmouseout   function      x000D    this style color   00F  x000D    x000D   x000D   x000D

User · Answer

You can t do exactly what you re describing  since a hover is part of the selector  not the CSS rules  A stylesheet has two components   selector  rules    Inline styles only have rules  the selector is implicit to be the current element   The selector is an expressive language that describes a set of criteria to match elements in an XML-like document   However  you can get close  because a style set can technically go almost anywhere    lt html gt     lt style gt       uniqueid hover  do something      lt  style gt     lt a id  uniqueid  gt hello lt  a gt   lt  html gt

User · Answer

My problem was that I m building a website which uses a lot of image-icons that have to be swapped by a different image on hover  e g  blue-ish images turn red-ish on hover   I produced the following solution for this    x000D   x000D   container div   x000D    width  100px  x000D    height  100px  x000D    background-size  100px 100px  x000D    x000D   container hover  withoutHover   x000D    display  none  x000D    x000D   container  withHover   x000D    display  none  x000D    x000D   container hover  withHover   x000D    display  block  x000D    x000D   lt p gt Hover the image to see it switch with the other  Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs  with different URL s   x000D   lt  p gt  x000D   lt div class container gt  x000D   lt div class withHover style  background-image  url  https   encrypted-tbn2 gstatic com images q tbn ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH    gt  lt  div gt  x000D   lt div class withoutHover style  background-image  url  http   i telegraph co uk multimedia archive 03523 Cat-Photo-Bombs-fa 3523609b jpg    gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    I introduced a container containing the pair of images  The first is visible and the other is hidden  display none   When hovering the container  the first becomes hidden  display none  and the second shows up again  display block

User · Answer

This is pretty late in the game  but when would you use JavaScript in an HTML Email  For example  at the company I currently work for  rhymes with Abodee   we use the lowest common denominator for most email marketing campaigns     and JavaScript is just not being used  Ever  Unless you are referring to some kind of pre-processing   As mentioned in a related post   Lotus Notes  Mozilla Thunderbird  Outlook Express  and Windows Live Mail all seem to support some sort of JavaScript execution  Nothing else does    Link to the article from which this was taken   http   en wikipedia org wiki Comparison of e-mail clients   Also  how would hovering translate to mobile devices  That s why I like the answer from above Long answer  you shouldn t    If anyone has more insights into this subject  please feel free to correct me  Thank you

[html] How to write a:hover in inline CSS?

Approach CSS only

CSS

Markup

Examples related to html

Examples related to css

Examples related to inline-styles