link hover color not honored when using onclick event

Richard Thoms · Dec 1, 2005

Hello,

Please checkout the html code below.

The first link is normal and will always show red when hovering. The
second link has no href in it (is that legal?) but accomplishes what I
want to do (create a simple popup window and).

The problem is that the second link will not honor the A:hover style
(color=red) in IE, it does work fine in Firefox.

One more interesting note is that without the A style definition the
second link has absoulutely no formatting. I'm forced to set the color,
decoration, and cursor to make it look like a link. This is true for
both IE and Firefox.

Any ideas?

I'm very new to the javascript so maybe there is an easier way to do
what I want. I thought about using target="_blank" but that gives me
full browser and I want more of a popup look.

Thanks in advance for any help.

-Richard

----------------------------------------
<html>

<style type="text/css">

</style>

<body>
<a href="hover_color.htm" target="_blank">
1 - Normal Link: Hover here and color changes!
</a><br />
<a onClick="window.open('hover_color.htm','','width=400,height=100')">
2 - Popup Link: Hover here and no color change!
</a><br />
</body>
</html>

Mark Parnell · Dec 1, 2005

The
second link has no href in it (is that legal?)

What does the validator say?

but accomplishes what I
want to do (create a simple popup window and).

But it's not about what you want; it's what about what your visitor
wants. It's unlikely he/she/it wants a popup, and likely that their
browser or other software will block popups. Or they could have
Javascript disabled, in which case nothing will happen at all (at least
with a popup blocker, they may get a message telling them it's been
blocked).

The problem is that the second link will not honor the A:hover style

No, the problem is that you are trying to force a popup on your
visitors.

(color=red) in IE, it does work fine in Firefox.

IE doesn't support :hover on anything except links.

I'm forced to set the color,
decoration, and cursor to make it look like a link.

That's because without a href attribute it's not a link. It's just an
anchor.

Richard Thoms · Dec 1, 2005

Mark said:
What does the validator say?

Validator does not complain so I guess it's OK. More on that below.

But it's not about what you want; it's what about what your visitor
wants. It's unlikely he/she/it wants a popup, and likely that their
browser or other software will block popups. Or they could have
Javascript disabled, in which case nothing will happen at all (at least
with a popup blocker, they may get a message telling them it's been
blocked).

Good points. For some more background. The real application is a
"email this page" link and purpose here is to produce a clean "popup"
style window that lets the visitor still see the current page but fill
in the form to send the email. I would rather not have to bring up a
full browser with all the menus/toolbars/etc for that purpose.

You know I have a pop-up blocker running but it does not complain. Is
window.open() all it takes to be tagged as an evil pop-up or are there
other things the pop-up blockers look for? For sure I don't want to get
this linked blocked and it is not an "automatic" or unsolicited pop-up,
instead only when user clicks the "email this page" link will the new
window appear.

No, the problem is that you are trying to force a popup on your
visitors.

IE doesn't support :hover on anything except links.

That's because without a href attribute it's not a link. It's just an
anchor.

I think this is the key to the problem. No href means no link, just an
anchor. I develop using firefox and everthing looked great there but
then when I test with IE I got unexpected results. Perhaps it is
firefox which has a bug and is letting this sneak through.

Thanks for the input.

-Richard

rf · Dec 1, 2005

Richard said:
Perhaps it is
firefox which has a bug and is letting this sneak through.

If you find differing behaivour between Firefox/any-other-browser and IE
you can safely assume that it is IE that is at fault.

As Mark said IE only supports :hover on *links*, that is an anchor with an
href attribute. Firefox rightly supports :hover on just about anything,
including anchors without an href attribute.

Mark Parnell · Dec 1, 2005

Good points. For some more background. The real application is a
"email this page" link and purpose here is to produce a clean "popup"
style window that lets the visitor still see the current page but fill
in the form to send the email.

a) Have the form as part of the page and return them to the same page
after submission
b) Have a link to the form on a separate page, that then takes them back
to the original page after submission.

You know I have a pop-up blocker running but it does not complain.

Different blockers will block different things. All (at least in theory)
will block unsolicited popups; some will block *any* popup.

Is
window.open() all it takes to be tagged as an evil pop-up

Evil popup is redundant IMNSHO.

All popups are evil. If I want
something opened in a new window (or more likely, new tab), I will do it
myself.

or are there
other things the pop-up blockers look for?

There certainly are others, but window.open can also be blocked.

For sure I don't want to get
this linked blocked and it is not an "automatic" or unsolicited pop-up,

Understood. But I still don't want a new window to open when I click a
link.

instead only when user clicks the "email this page" link will the new
window appear.

*If* the user has Javascript enabled, and *if* the popup isn't blocked.

I think this is the key to the problem. No href means no link, just an
anchor. I develop using firefox and everthing looked great there but
then when I test with IE I got unexpected results.

Firefox supports :hover properly, not just on links.

Perhaps it is
firefox which has a bug and is letting this sneak through.

Firefox has several different options for blocking popups. The basic
popup blocker won't block window.open when triggered by user
interaction, but it can be configured to do so (as I have done). I can't
even remember which option it is that controls that particular feature,
but it can certainly be done.

Mitja Trampus · Dec 1, 2005

Richard said:
Mark said:

The second link has no href in it (is that legal?)
/.../ [:hover does not work]

Click to expand...

That's because without a href attribute it's not a link. It's just an
anchor.

Click to expand...

I think this is the key to the problem. No href means no link, just an
anchor. I develop using firefox and everthing looked great there but
then when I test with IE I got unexpected results. Perhaps it is
firefox which has a bug and is letting this sneak through.

Nono, check the specs, it's IE that's rusty.
The solution to your problem is to use something along the
lines of
<a
href="foo.html"
onclick="window.open('foo.html'); return false"instead of just
<a onclick="window.open('foo.html')">

This solves your problem (a is now a "proper" link and IE
will support :hover on it) as well as another one: your
current solution does not work for users without JS, whereas
the one with href does.

WRT popup-blockers: No, they're smart enough not to block
popups triggered by onclick events, so I wouldn't worry
about that.
What I'd consider more is whether a popup is perhaps still
more of a nuisance to the user than an elegant solution.

Richard Thoms · Dec 2, 2005

Mitja said:
Richard said:

Mark said:

In our last episode, Richard Thoms <[email protected]> pronounced to
alt.html:

The second link has no href in it (is that legal?)
/.../ [:hover does not work]
That's because without a href attribute it's not a link. It's just an
anchor.

Click to expand...

I think this is the key to the problem. No href means no link, just
an anchor. I develop using firefox and everthing looked great there
but then when I test with IE I got unexpected results. Perhaps it is
firefox which has a bug and is letting this sneak through.

Click to expand...

Nono, check the specs, it's IE that's rusty.

I should have known better. IE correct, FireFox wrong, what was I thinking?

The solution to your problem is to use something along the lines of
<a
href="foo.html"
onclick="window.open('foo.html'); return false"
instead of just
<a onclick="window.open('foo.html')">

This solves your problem (a is now a "proper" link and IE will support
:hover on it) as well as another one: your current solution does not
work for users without JS, whereas the one with href does.

That did it!

Thanks for the help.

WRT popup-blockers: No, they're smart enough not to block popups
triggered by onclick events, so I wouldn't worry about that.
What I'd consider more is whether a popup is perhaps still more of a
nuisance to the user than an elegant solution.

Good to know. I'll consider go/no-go for pop-up but I think in this
application pop-up is the way to go. The visitor is on a web-page.
They click "email this page to a friend" a small POP-UP comes up to
enter email to/from info and a little message (all the while they can
still see the page they are referring to). Click send and the pop-up
goes away and they are right back where they started.

Thanks to all. I'll consider this issue closed!

How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Hover state on an element stuttering when I'm close to the edge, or move my mouse really fast	1	Feb 2, 2023
Help with my responsive home page	2	Dec 14, 2022
Slideshow not working properly	2	Jan 7, 2023
How to change star rating color on mouseenter, on mouseout, and on onclick	0	Sep 28, 2018
When draggable=false & draggable=true dont work ?	1	Jan 14, 2023
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
Help me sort out this script	1	Oct 17, 2023

link hover color not honored when using onclick event

Richard Thoms

Mark Parnell

Richard Thoms

rf

Mark Parnell

Mitja Trampus

Richard Thoms

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads