Login | Register | FAQ

Re: a:hover and a:active not working

+ Post a reply

3 posts Page 1 of 1

Re: a:hover and a:active not working

by Fangorn » Thu Jul 03, 2014 10:06 am

Hello everybody.

I am trying to learn CSS with the help of the html.net tutorial after completing the tutorial on html.

I am a total newbie, so I suppose that if I do wrong I am even unable to understand why.
Anyway, since I accepted to use the Web-standard and validation advised in the html tutorial, I have taken from granted that the CSS code in the CSS tutorial should work. However I found some problem with pseudo-class: a:hover and a:active do not work. In particular, a:hover does not change font-family and does not change style in italic; a:active does not show the background-color I chose, in effect does not change anything.

This is my html code:

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

   <title>  </title>
   <link rel="stylesheet" type="text/css" href="style.css" />


      <h1 id="Start"> My first stylesheet </h1>
      <br />
      <p> Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque.
Ennius et sapines et fortis et alter Homerus, ut critici di*beep*, leviter curare videtur, quo promissa cadant et somnia Pythagorea.Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.
Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos numeratque poetas ad nostrum tempus Livi scriptoris ab aevo, si nimis antique, si dure.
Interdum volgus rectum videt, est ubi peccat. </P>

      <br />
      <br />

      <a href="#Start"><img src="uparrow.bmp" width="30px" heigth="30px" title="Go to start" /></a>
      <a href="#Start"><p style="text-align:center"> Go back </p></a>

      <br />
      <br />

      <a href="Google.com"><p style="text-align:center"> Go to Google </p></a>


The followin is the css code:

Code: Select all
body {background: white}

h1 {color: #000000;
   background-color: #FF9900;
   font: normal normal bold 2em Damion, courier new, serif;
   text-decoration: underline;}

p {font: normal normal normal 14px courier new, serif;
   text-indent: 30px;
   text-transform: none;

a:link {color: #6699CC;}
a:visited {color: #660099;}
a:hover {color: #330000;
    font-style: italic;
         font-family: Yellowtail;}
a:active {background-color: #FF3300;}

If you like, I already posted at:
http://csscreator.com/topic/ahover-and- ... ot-working

I wondering how can I proceed with the css tutorial taking for granted that I accepted to use xhtml 1.0.

Many thanks in advance
User avatar


  • Posts: 17
  • Joined: Tue Jun 24, 2014 3:28 pm

Re: a:hover and a:active not working

by XainPro » Sat Jul 05, 2014 12:08 am

do not use <p> inside a ;)

check this http://jsfiddle.net/yXUvd/
its working but you use doc type strict maybe that was issue
User avatar


  • Posts: 3933
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: a:hover and a:active not working

by Fangorn » Sat Jul 05, 2014 7:52 am

Thanks XainPro,

I shouldn't have used <p> inside a, as you said.
That's was the problem. It works using <a> inside p, that's the correct form. It was just a very silly mistake of mine.

Many thanks for your help and your time
User avatar


  • Posts: 17
  • Joined: Tue Jun 24, 2014 3:28 pm

+ Post a reply

Page 1 of 1