| Author |
How to prevent hover of anchored words?
|
|
| Fred Lock 2005-11-13, 6:51 pm |
| 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. 2005-11-13, 6:51 pm |
| 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 2005-11-13, 6:51 pm |
| 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.
| |
|
| 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 2005-11-13, 6:51 pm |
| 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 2005-11-13, 6:51 pm |
| > <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 2005-11-13, 6:51 pm |
| > 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 2005-11-13, 6:51 pm |
| > <h2><a name="vindaloo"></a>Vindaloo</h2>
I figured this works too, but I guess it isn't valid or something.
| |
| Alexander Clauss 2005-11-13, 6:51 pm |
| Fred Lock <fredlock@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 2005-11-13, 6:51 pm |
| > <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 2005-11-13, 6:51 pm |
| Fred Lock skrev:
>
>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 2005-11-13, 6:51 pm |
| ..oO(Fred Lock)
>
>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 2005-11-13, 6:51 pm |
| ..oO(Fred Lock)
>
>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 2005-11-13, 6:51 pm |
| On Sun, 13 Nov 2005, Fred Lock in an unattributed quote:
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.
[color=darkred]
> 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 2005-11-13, 6:51 pm |
| Fred Lock wrote:
[Beauregard said:]
>
> 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 2005-11-13, 6:51 pm |
| On Sun, 13 Nov 2005, Michael Fesser wrote:
> .oO(Fred Lock)
>
>
> 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 2005-11-13, 6:51 pm |
| > h2 a:hover {...}
Even better! and obvious. Thanks.
| |
| Fred Lock 2005-11-13, 6:51 pm |
| > 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 2005-11-13, 6:51 pm |
| ..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. 2005-11-13, 6:51 pm |
| 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
| |
|
| "Fred Lock" <fredlock@mailinator.net> wrote in message
news:dl7e5i$v8h$03$1@news.t-online.com...
>
> Yes thanks. It works, and no need for the yes class.
>
>
> 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 2005-11-13, 6:51 pm |
| > Wishful thinking
Positive thinking!
| |
| Eric Lindsay 2005-11-14, 10:32 pm |
| In article <dl7eho$v8h$03$3@news.t-online.com>,
Fred Lock <fredlock@mailinator.net> wrote:
>
> 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 2005-11-14, 10:32 pm |
| In article <tahen1d7pjhj68ip0go12mcf2mu1fv3v8v@dtext.news.tele.dk>,
Knud Gert Ellentoft <ellentoft@mail.tele.invalid> wrote:
> Fred Lock skrev:
>
>
> 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 2005-11-21, 11:31 pm |
| On Tue, 15 Nov 2005 02:57:12 +0100, Eric Lindsay
<NOSPAmar2005@ericlindsay.com> wrote:
> In article <tahen1d7pjhj68ip0go12mcf2mu1fv3v8v@dtext.news.tele.dk>,
> Knud Gert Ellentoft <ellentoft@mail.tele.invalid> wrote:
>
>
> 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
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |