470,874 Members | 1,464 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,874 developers. It's quick & easy.

The elusive hover and <p>

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


Oct 31 '08 #1
2 1249
your anchors do not have an href specification (link), so none of the psuedo
(:) properties work.

-- bruce (sqlwork.com)
"kurt sune" wrote:
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


Oct 31 '08 #2
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

"bruce barker" <br*********@discussions.microsoft.comwrote in message
news:2A**********************************@microsof t.com...
your anchors do not have an href specification (link), so none of the
psuedo
(:) properties work.

-- bruce (sqlwork.com)


Nov 3 '08 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Donald Firesmith | last post: by
6 posts views Thread by Alan J. Flavell | last post: by
6 posts views Thread by mike | last post: by
1 post views Thread by JezB | last post: by
3 posts views Thread by ajay2552 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.