登录 | 注册 | FAQ
Anonymous

Re: a:hover and a:active not working

+ 发表回复

3 篇帖子 分页: 1 / 1


Re: a:hover and a:active not working

Fangorn » 周四 7月 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:

代码: 全选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

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


   </head>

   <body>
      <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>

   </body>
</html>



The followin is the css code:

代码: 全选
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-align:justify;
   text-transform: none;
   letter-spacing:1px}

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
头像

Fangorn

  • 帖子: 17
  • 注册: 周二 6月 24, 2014 3:28 pm

Re: a:hover and a:active not working

XainPro » 周六 7月 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
头像

XainPro

  • 帖子: 3933
  • 注册: 周五 2月 17, 2012 8:10 pm

Re: a:hover and a:active not working

Fangorn » 周六 7月 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
头像

Fangorn

  • 帖子: 17
  • 注册: 周二 6月 24, 2014 3:28 pm


+ 发表回复

分页: 1 / 1