Time to understand: pseudo class - a:hover. If only i can get some help

HTML & CSS
1

Hi everyone !
Ther is a link in my page, There is a paragraph beneath that link. The paragraph is not present
on the page because it is styled: display:none.
What i wanted to do is style that link so that when a mouse hovers above it, the paragraph will be
seen.
At this moment i find it impossible but maybe with the kind support of someone at this forum the
impossible will turn into reality…
This is my code:


<title>Untitled Document</title>
<style type="text/css">
 p {display:none;}
 a:hover p{display:block;}
</style>
</head>
 <body>
 <a href="#">abc</a>
<p>abcdefg</p>
</body>

Any idea why this is not working ? I thought it wouldn’t work with ie6 but it doesn’t with all other
browsers too :frowning:
Thanks a lot !

2

p a:hover {visibility: visible;}

3

Oops, I left that in by ascident ('cause at first I was going to use display: none for the span…)

4

Hi Stomme,
Your notification that says that an element related to a link’s hover event doesn’t necessarily have to be a link’s element child is bad news to me. I thought i had finally found something solid to rely on.
I haven’t yet assesed you suggestion because i’d like to first fully understand Ralph’s suggestion. Getting myself mixed the 2 ways will only add to my confusion. Once i’m done with the “simple” way, I’ll see if i can handle your approach.
Thanks a lot !

5

I understood one thing: The element which i want to show up or disappear from page as a result of mouse event in relation to a link, must be a sub element of that link.

Well, no, it doesn’t HAVE to be a child, not for modern browsers:

<p class=“demand”>Hover me!</p>
<p class=“show”>Hey whoa how’d I get here??</p>

p.show {
position: absolute;
left: -999px;
}
p.demand:hover + p {
position: static;
}

(in this case, we’re assuming there are only two p’s in the body, so the absolute positioning is working to hide the p.show but it’s very sloppy code… it’s also a bad example because it can’t be affected by keyboards, as p’s aren’t focussable… it’s only showing the possibility)

But, IE6 does not understand +, so your last comment makes me think you’ll need to do it ralph’s way because yes, for older browsers the showing thingie has to be a child.

Why did you assign
p a span {left: -9999px;}
instead of display:none?

There’s another good reason to to it ralph’s way: the most popular screen readers (for the blind) won’t read out text that’s display: none (except in special circumstances) and text that’s merely positioned off-screen is completely accessible to them.
So display: none might be an option if you also definitely wanted to hide that text from screen readers… of course, they’re not likely to mouse over your anchor either, so :hover to make that text show would be inadequate.
Sighted people also may not have a mouse. Add :focus to your anchor’s hover statement to make it keyboard-accessible.

p a:hover span, p a:focus span {
position: static;
}

(should do the same thing)

b. Your code didnt work with ie6. How do i make it work with that browser too ?

It should, but IE6 and 7 do sometimes have trouble changing “states” (block, inline etc) with :hover. Though the position: static might work, because that explicitly makes the span NOT position: absolute, and therefore should fall back into whatever its default state (in this case, inline) is.

Adding display: block to an abso-po’d element doesn’t change it from being absolutely positioned (which is already putting the span in block context anyway) so IE might only be seeing new coordinates (top and left).

Sometimes when you’re only changing coordinates of something on :hover, IE might need a “trigger”. If you’ll be having a lot of anchors getting hovered to hide/show stuff, you can use this:

a:hover {
visibility: visible;
}
This code doesn’t actually do anything. The anchors are already visibility: visible by default anyway. But simply stating this seems to make IE accept some defaults from the anchor to the :hover state. Or something. There are a lot of little bugs regarding this and the fixes are always weird: adding a background colour to :hover will do it, or changing the font weight.

Heck I just came back from fixing an IE6/7 bug where an anchor absolutely positioned over an image wasn’t clickable in IE. It was the correct size and in the correct place, but setting a high z-index didn’t help. Only stating a bogus background on it magically fixed it:
a.speciallink {
background: url(#);
}
bleh. IE : (

So anyway, using Ralph’s code, start by removing the coordinates and see if changing to position: static works in IE. If it doesn’t, then go back to ralph’s code, remove the “display: block” (not doing anything) and set a top coord for the default (where the left: -999 is) and before both of those lines of code, see if a:hover {visibility: visible} magically makes it work.

6

Hi Ralph,
This is the page’s code (copied and pasted from your post). It works with Google’s Chrome but doesn’t work with ie6.


<style type="text/css">
 p a {position: relative;}
 p a span {position: absolute; left: -9999px;}
 p a:hover span {display: block; top: 30px; left: 0;}
</style>
</head>

<body>
<p><a href="#">abc<span>abcdefg</span></a></p>
</body>
</html>

It would take me long time to upload a temporary host so i thought if you
wouldn’t mind copying it from here and see if it works with your ie6.
Thank you very much .

7

Thanks a lot Ralph
I understood one thing: The element which i want to show up or disappear from page as a result of mouse event in relation to a link, must be a sub element of that link.
Two Things i didn’t understand:
a.Why did you assign

p a span {left: -9999px;}

instead of

display:none

?
b. Your code didnt work with ie6. How do i make it work with that browser too ?
Anyway, your post is a great progress for me regarding pseudo class and i’m grateful to you.

8

Hi Ralph,
Thanks. This code:


<style type="text/css">
 p a {position: relative;}
 p a span {position: absolute; left: -9999px;}
 p a:hover span {top: 30px;left: 0;}
</style>
</head>
 <body>
 <p><a href="#">abc<span>abcdefg</span></a></p>
</body>

Is not working with ie6 ! Any idea why ?
Thanks and sorry this is so difficult on me, maybe i should forget all about ie6…:frowning:

9

When using position: absolute; it’s easier to just change the position of the element than worry about display. Still, I could have used display instead.

Your code didnt work with ie6.

Hmm, it should do.Could you post a link to the page, so we can see what we’re really dealing with? Even a test page, or post the full page code, including embedded CSS?

10

Ok deotpit, read my post later when you get back to it.

Make this your code and see if it works in IE6:


<style type="text/css">
 p a {position: relative;}
[b]p a:hover {visibility: visible;}[/b]
 p a span {position: absolute; [b]top: 30px;[/b] left: -9999px;}
 p a:hover span {left: 0;}
</style>
</head>

<body>
<p><a href="#">abc <span>abcdefg</span></a></p>
</body>
</html>

Your notification that says that an element related to a link’s hover event doesn’t necessarily have to be a link’s element child is bad news to me. I thought i had finally found something solid to rely on.

No, you do: you will always be safe having the one who appears as a child of whoever is getting the action. The + (adjacent-sibling selector) is good for browsers newer than IE6 and Safari 3 though, so it’s nice to know you have even more flexibility if you need it. I use + often to make dropdown menus keyboard accessible, since while you can hover over a parent li, you can’t focus on a li (focussable elements are basically only anchors and form controls).

If you’re just starting out with CSS syntax, go ahead and ignore + for now and stick with hovering-over-parents for now.

11

Two things in particular are wrong with this. Firstly, that CSS would only work if the <p> were inside the <a> element. Secondly, that wouldn’t be legal anyway!

So, one thing you could do is this:

HTML

<p><a href="#">abc<span>abcdefg</span></a></p>

CSS

p a {position: relative;}
p a span {position: absolute; left: -9999px;}
p a:hover span {
  display: block;
  top: 30px;
  left: 0;
}

That’s just a quick example, and you will have to play around with it a bit. Does that help?