How to prevent hover of anchored words?

[Fred Lock]

Hello,

I have a page with a usual mouseover link highlight effect eg.:

a:hover {color: #ff0000; text-decoration: none;}

I also have some anchor links such as:

<a href="#jalfrezi">Jalfrezi</a> | <a href="#vindaloo">Vindaloo</a> | etc...

<IMG> ...

<a name="Jalfrezi"><h2>Jalfrezi</h2></a>
Into a pot of boiling water, drop the cauliflower, carrots, bell pepper, and
green peas and blanch for 3 to 5 minutes etc...

<a name="vindaloo"><h2>Vindaloo</h2></a>
In a wok, fry the onions over low to moderate heat in the oil until they are
carmelized. Add the chicken, increase the heat, and stir fry until the
chicken turns white.

---

Now not only the "Jalfrezi" and "Vindaloo" links highlight on the page, but
also the achors (H2's) themselves, without the mouse turning into a
pointer. Is there an easy way to prevent that?

[Evertjan.]

Fred Lock wrote on 13 nov 2005 in
comp.infosystems.www.authoring.stylesheets:

a:hover {color: #ff0000; text-decoration: none;}

I also have some anchor links such as:

<a href="#jalfrezi">Jalfrezi</a> | <a href="#vindaloo">Vindaloo</a> |
etc...

<IMG> ...

<a name="Jalfrezi"><h2>Jalfrezi</h2></a>

<style>
a.yes:hover {color: #ff0000; text-decoration: none;}
a.no:hover {background-color:yellow;}
</style>

<a href="#Jalfrezi" class='yes'><h2>Jalfrezi</h2></a>
<a href="Jalfrezi" class='no'><h2>Jalfrezi</h2></a>

<a name="Jalfrezi"><h2>This is not hoverable in IE</h2></a>
[try onmouseover/onmouseout javascript/css]

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[Alan J. Flavell]

On Sun, 13 Nov 2005, Fred Lock wrote:

I have a page with a usual mouseover link highlight effect eg.:

a:hover {color: #ff0000; text-decoration: none;}
[...]
Now not only the "Jalfrezi" and "Vindaloo" links highlight on the
page, but also the achors (H2's) themselves, without the mouse
turning into a pointer.
Sure - that's what you're asking for in your selector, after all.
Is there an easy way to prevent that?

If you refer to the relevant part of the spec:

http://www.w3.org/TR/CSS21/selector....pseudo-classes

it should be obvious. Make your selectors more-specific:

a:link:hover, a:visited:hover etc.

(Remember that for selectors of equal specificity, order matters.)

have fun.

[rf]

Fred Lock wrote:

Hello,

I have a page with a usual mouseover link highlight effect eg.:

a:hover {color: #ff0000; text-decoration: none;}

I also have some anchor links such as:

<a href="#jalfrezi">Jalfrezi</a> | <a href="#vindaloo">Vindaloo</a> | etc...

<IMG> ...

<a name="Jalfrezi"><h2>Jalfrezi</h2></a>
Into a pot of boiling water, drop the cauliflower, carrots, bell pepper, and
green peas and blanch for 3 to 5 minutes etc...

<a name="vindaloo"><h2>Vindaloo</h2></a>
In a wok, fry the onions over low to moderate heat in the oil until they are
carmelized. Add the chicken, increase the heat, and stir fry until the
chicken turns white.

---

Now not only the "Jalfrezi" and "Vindaloo" links highlight on the page, but
also the achors (H2's) themselves, without the mouse turning into a
pointer. Is there an easy way to prevent that?

This is invalid HTML anyway. You cannot have a block element (h2) inside an
inline element (a).

--
Cheers, Richard.
If you are reading this using google groups then also read this:
http://www.safalra.com/special/googlegroupsreply/ if you have not done so
already. If you reply to this post without correct quoting and attribution,
as per the above, I, and others, may just totally ignore you.

[Beauregard T. Shagnasty]

Fred Lock wrote:

<a name="Jalfrezi"><h2>Jalfrezi</h2></a>
<h2><a name="Jalfrezi"></a>Jalfrezi</h2>
<a name="vindaloo"><h2>Vindaloo</h2></a>
<h2><a name="vindaloo"></a>Vindaloo</h2>
Is there an easy way to prevent that?

Yup.

--
-bts
-Warning: I brake for lawn deer

[Fred Lock]

> <a href="Jalfrezi" class='no'><h2>Jalfrezi</h2></a>

Yes thanks. It works, and no need for the yes class.

<a name="Jalfrezi"><h2>This is not hoverable in IE</h2></a>

I don't care about IE for non-essential effects like hover. The browser
should die out in the next 2-3 years anyway, and I hope the Microsoft
Corporation soon thereafter.

[Fred Lock]

> This is invalid HTML anyway. You cannot have a block element (h2) inside

an inline element (a).

In that case I better do:

<h2><a name=""jalfrezi">Jalfrezi</a></h2>

It sounds like a useless CSS rule and I'm not sure what difference it makes
in the real world but I guess I will comply.

[Fred Lock]

> <h2><a name="vindaloo"></a>Vindaloo</h2>

I figured this works too, but I guess it isn't valid or something.

[Alexander Clauss]

Fred Lock <fr******@mailinator.net> wrote:

<a name="Jalfrezi"><h2>Jalfrezi</h2></a>

This is invalid. An inline element (like <A>) can not contain
block elements (like <H2>). So in principle the <A> element
would end directly before the next block element which would
result in the following "virtual" code:

<a name="Jalfrezi"></a><h2>Jalfrezi</h2>

Though most browsers wouldn't handle it this way, you should
nevertheless fix these errors. This is the correct nesting:

<h2><a name="Jalfrezi">Jalfrezi</a></h2>

--
Alexander

[Fred Lock]

> <h2><a name="Jalfrezi">Jalfrezi</a></h2>

Yes that's what I opted for, adding the class="no" to the anchor and
specifying it same color on hover as the text when its not hovered. Thanks.

[Knud Gert Ellentoft]

Fred Lock skrev:

<h2><a name="vindaloo"></a>Vindaloo</h2>

I figured this works too, but I guess it isn't valid or something.

Use id instead.

<h2 id="vindaloo">Vindaloo</h2>
--
Topposter du svar, dvs. skriver dit svar over det citerede,
så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html

[Michael Fesser]

..oO(Fred Lock)

This is invalid HTML anyway. You cannot have a block element (h2) inside
an inline element (a).
In that case I better do:

<h2><a name=""jalfrezi">Jalfrezi</a></h2>

In recent browsers this works as well:

<h2 id="jalfrezi">Jalfrezi</h2>
It sounds like a useless CSS rule
It has nothing to do with CSS, it's an HTML rule that inline elements
can only contain other inline elements or text. And it does make sense,
simply because of the differences in how block-level and inline elements
are handled and rendered.

7.5.3 Block-level and inline elements
http://www.w3.org/TR/html401/struct/global.html#h-7.5.3
and I'm not sure what difference it makes
in the real world

Invalid code is invalid code.

Micha

[Michael Fesser]

..oO(Fred Lock)

<h2><a name="Jalfrezi">Jalfrezi</a></h2>

Yes that's what I opted for, adding the class="no" to the anchor and
specifying it same color on hover as the text when its not hovered. Thanks.

No need for a class there:

h2 a:hover {...}

does the same.

Micha

[Alan J. Flavell]

On Sun, 13 Nov 2005, Fred Lock in an unattributed quote:

This is invalid HTML anyway. You cannot have a block element (h2)
inside an inline element (a).

which came from "rf". I must admit I'd missed that error, but the
answer which I gave will work just as well when the error is
corrected.
In that case I better do:

<h2><a name=""jalfrezi">Jalfrezi</a></h2>
You'd better count your quotes. But otherwise that's fine, and
compatible with a wide range of browsers (including any there might be
which still require non-null content in the anchor element).
It sounds like a useless CSS rule
What's "it"? The error raised by rf was an HTML syntax rule, which
you'd do well to check and correct (e.g with the W3C HTML validator)
before asking the group for assistance. It's demeaning for humans to
be asked to do the hack work of a computer.
and I'm not sure what difference it makes in the real world

That sounds like a good reason for sticking to the rules. You'd do
well to make friends with the validators and checkers.

[Beauregard T. Shagnasty]

Fred Lock wrote:

[Beauregard said:]

<h2><a name="vindaloo"></a>Vindaloo</h2>

I figured this works too, but I guess it isn't valid or something.

Why wouldn't it be valid? It validates on my pages. Use an empty <a
element if you don't want to worry about hover stuff.

(Please don't trim attributes of the quotes. Thanks.)

--
-bts
-Warning: I brake for lawn deer

[Alan J. Flavell]

On Sun, 13 Nov 2005, Michael Fesser wrote:

.oO(Fred Lock)

<h2><a name="Jalfrezi">Jalfrezi</a></h2>
Yes that's what I opted for, adding the class="no" to the anchor
and specifying it same color on hover as the text when its not
hovered. Thanks.

No need for a class there:

True
h2 a:hover {...}

does the same.

AIUI he does *not* want hover to take effect on the anchors. He was
only getting it because his selector a:hover was too broad - he only
wanted it to take effect for links. The solution is to use a
more-specific selector *for the links*.

The purpose-designed answer is a:link:hover (and maybe a:visited:hover
if he wants that too). All this foolery with extra classes and
additional context selectors is just distraction from the general
solution.

[Fred Lock]

> h2 a:hover {...}

Even better! and obvious. Thanks.

[Fred Lock]

> be asked to do the hack work of a computer.

Yes its true, but then again, a validator won't give me any opinions.

well to make friends with the validators and checkers.

Will comply.

[Michael Fesser]

..oO(Alan J. Flavell)

AIUI he does *not* want hover to take effect on the anchors.
Yep, it was just in reply to his way of "removing" the hover on the
anchors.
He was
only getting it because his selector a:hover was too broad - he only
wanted it to take effect for links. The solution is to use a
more-specific selector *for the links*.

ACK

a[href]:hover would also do it, if there wouldn't be IE ...

Micha

[Matthias Hu.]

It's a matter of taste, isn't it? I don't see the point of your
fundamentalistic view...

And here comes the quote I just replied to - sorry, but you're literally
begging for it: ;-)

"Knud Gert Ellentoft" ha scritto...

Topposter du svar, dvs. skriver dit svar over det citerede,
så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html

Regards,
Matthias

[Tony]

"Fred Lock" <fr******@mailinator.net> wrote in message
news:dl*************@news.t-online.com...

<a href="Jalfrezi" class='no'><h2>Jalfrezi</h2></a>

Yes thanks. It works, and no need for the yes class.

<a name="Jalfrezi"><h2>This is not hoverable in IE</h2></a>

I don't care about IE for non-essential effects like hover. The browser
should die out in the next 2-3 years anyway, and I hope the Microsoft
Corporation soon thereafter.

Wishful thinking

[Fred Lock]

> Wishful thinking

Positive thinking!

[Eric Lindsay]

In article <dl*************@news.t-online.com>,
Fred Lock <fr******@mailinator.net> wrote:

<h2><a name="vindaloo"></a>Vindaloo</h2>

I figured this works too, but I guess it isn't valid or something.

I had a note that some user agents may not find an empty anchor. I
don't know which browsers that might be, but I would prefer not to
chance it.

--
http://www.ericlindsay.com

[Eric Lindsay]

In article <ta********************************@dtext.news.tel e.dk>,
Knud Gert Ellentoft <el*******@mail.tele.invalid> wrote:

Fred Lock skrev:

<h2><a name="vindaloo"></a>Vindaloo</h2>

I figured this works too, but I guess it isn't valid or something.

Use id instead.

<h2 id="vindaloo">Vindaloo</h2>

I thought id didn't work in Netscape 4. I wonder what else it doesn't
work in?

--
http://www.ericlindsay.com

[Rijk van Geijtenbeek]

On Tue, 15 Nov 2005 02:57:12 +0100, Eric Lindsay
<NO**********@ericlindsay.com> wrote:

In article <ta********************************@dtext.news.tel e.dk>,
Knud Gert Ellentoft <el*******@mail.tele.invalid> wrote:

Fred Lock skrev:

>> <h2><a name="vindaloo"></a>Vindaloo</h2>
>
>I figured this works too, but I guess it isn't valid or something.

Use id instead.

<h2 id="vindaloo">Vindaloo</h2>

I thought id didn't work in Netscape 4. I wonder what else it doesn't
work in?

MSIE 2.0 and lower. Opera 3.2 and lower. And probably in lots of other
browsers released before 1996...

--
Get Opera 8 now! Speed, Security and Simplicity.
http://my.opera.com/Rijk/affiliate/

Rijk van Geijtenbeek