The elusive hover and <p>

  • Thread starter Thread starter kurt sune
  • Start date Start date
K

kurt sune

I am having trouble with hover and <p>.
I have reduced the problem to this:

Given a HTML-page like this:
<body>

<a>Number1</a>

<div id="content">

<a>Number2</a>

<p class="nav">

<a>Pnav1</a> <a>Pnav2</a>

</p>

<div class="nav">

<a>DIVnav1</a> <a>DIVnav22</a>

</div>

<br />

</div>

<a>Number3</a>

</body>


And a CSS like this:

a {font-size: 0.9em;}

a:link {color: red ; text-decoration: none;}

a:visited {color: gray; text-decoration: none;}

a:hover {color: red ; background-color: black; text-decoration: underline;}

a:active {color: red; text-transform: uppercase ; text-decoration:
underline;}

..nav a:hover {color: yellow ; background-color: black; text-decoration:
underline;}

..nav a {font-size:2em font: 1.3em "Trebuchet MS", verdana,
sans-serif;text-decoration: none;text-transform: uppercase;padding: 5px;

margin: 0px 10px;border-style:solid;border-width: 1px;border-color:#542F17;}

p {font-family: Verdana, Arial, sans-serif;font-size: 0.9em;}

/*p:hover {}*/



If I run this page and move the mouse over the text no hovering effect
occurs.

If I uncomment the last line in the CSS it works.



Can someone please explain what I dont grasp?



/k
 
your anchors do not have an href specification (link), so none of the psuedo
(:) properties work.

-- bruce (sqlwork.com)
 
Thanks, you are right about that.

But why does the inclusion of "p:hover {}"
triggers the hover-action on a <a>-tag that lacks the href?

/k
 
Back
Top