How to use hover in CSS

Question

I used the code below in order to fulfill this target   When mouse hover on the anchor  the underline comes out   but it failed to work        lt a class  hover  gt click lt  a gt       a  hover  hover          text-decoration underline          What s the right version to do this

User · Answer

If you want the underline to be present while the mouse hovers over the link, then:

a:hover {text-decoration: underline; }

is sufficient, however you can also use a class-name of 'hover' if you wish, and the following would be equally applicable:

a.hover:hover {text-decoration: underline; }

Incidentally it may be worth pointing out that the class name of 'hover' doesn't really add anything to the element, as the psuedo-element of a:hover does the same thing as that of a.hover:hover. Unless it's just a demonstration of using a class-name.

User · Answer

The href is a required attribute of an anchor element  so without it  you cannot expect all browsers to handle it equally  Anyway  I read somewhere in a comment that you only want the link to be underlined when hovering  and not otherwise  You can use the following to achieve this  and it will only apply to links with the hover-class    lt a class  hover  href    gt click lt  a gt   a hover       text-decoration  none     a hover hover       text-decoration underline

User · Answer

Not an answer  but explanation of why your css is not matching HTML   In css space is used as a separator to tell browser to look in children  so your css  a  hover  hover     text-decoration underline      means  look for a element  then look for any descendants of it that have hover class and look of any descendants of those descendants that have hover state  and would match this markup   lt a gt      lt span class  hover  gt         lt span gt           I will become underlined when you hover on me        lt span  gt      lt  span gt   lt  a gt     If you want to match  lt a class  hover  gt I will become underlined when you hover on me lt  a gt  you should use a hover hover  which means  look for any a element with class hover and with hover state

User · Answer

I was working on a nice defect last time and was wondering more about how to use properly hover property for A tag link and for IE browser  A strange thing for me was that IE was not able to capture A tag link element based on a simple A selector  So  I found out how to even force capturing A tag element and I spotted that we must use more specifc CSS selector  Here is an example below - It works perfect   li a href  hover

User · Answer

There are many ways of doing that  If you really want to have a  hover  class in your A element  then you d have to do   a hover hover   code here     Then again  it s uncommon to have such a className there  this is how you do a regular hover   select hover   code here     Here are a few more examples   1  HTML    lt a class  button  href     title    gt Click me lt  a gt    CSS    button hover   code here     2  HTML    lt h1 gt Welcome lt  h1 gt    CSS   h1 hover   code here      hover is one of the many pseudo-classes   For example you can change  you can control the styling of an element when the mouse hovers over it  when it is clicked and when it was previously clicked   HTML    lt a class  home  href     title  Go back  gt Go home  lt  a gt    CSS    home   color  red     home hover   color  green     home active   color  blue     home visited   color  black      Aside the awkward colors I ve given as examples  the link with the  home  class will be red by default  green when the mouse hovers them  blue when they are clicked and black after they were clicked   Hope this helps

User · Answer

a hover hover

User · Answer

You need to concatenate the selector and pseudo selector  You ll also need a style element to contain your styles  Most people use an external stylesheet  for lots of benefits  caching for one     lt a class  hover  gt click lt  a gt    lt style type  text css  gt       a hover hover           text-decoration  underline           lt  style gt    Just a note  the hover class is not necessary  unless you are defining only certain links to have this behavior  which may be the case

User · Answer

a hover hover       text-decoration underline

User · Answer

You should have used   a hover       text-decoration  underline      hover is a pseudo class in CSS  No need to assign a class

[css] How to use 'hover' in CSS

Examples related to css

Examples related to hover

Examples related to anchor