The elusive hover and <p>


kurt sune

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

Given a HTML-page like this:


<div id="content">


<p class="nav">

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


<div class="nav">

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


<br />




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:

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

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

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

Can someone please explain what I dont grasp?


bruce barker

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

-- bruce (

kurt sune

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?


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question