Javascript to enable the :hover pseudo class on IE?

As you might know, IE doesn't support the :hover pseudo-class on every tag
(just the "a" tag AFAIK)
Is there a simple JavaScript that would solve the problem?
I have images that have a light blue outline, and when I pass the mouse
over, the outline turns to red.

#featured img {
display: block;
border: 1px solid #DCDFE8;
padding: 1px;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
#featured img:hover {
border: 1px solid #FF0000;
}


Of course it doesn't work on IE. How would you do?

--

Kerberos.

http://www.opera.com
http://www.freebsd.org
http://www.auriance.com
http://www.osresources.com
http://exodus.jabberstudio.org

On Mon, 10 Jan 2005 16:03:32 -0200, Kerberos <me (AT) privacy (DOT) net> wrote:

[:hover emulation in IE]

Is there a simple JavaScript that would solve the problem?

It probably would have been better to ask this in comp.lang.javascript.

[snip]

<img ...
onmouseover="if(this.style){this.style.borderColor ='red';}"
onmouseout="if(this.style){this.style.borderColor= '';}">

You could of course use #RGB to specify the colour, but the keyword was
shorter.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

*Kerberos* <me (AT) privacy (DOT) net>:

As you might know, IE doesn't support the :hover pseudo-class on every
tag (just the "a" tag AFAIK)
Is there a simple JavaScript that would solve the problem?

Well, there is Dean Edwards's IE7, which features that and more.

--
If the glass is half full or half empty
depends on if you are pouring or drinking.

Em Mon, 10 Jan 2005 23:03:34 GMT, Michael Winter
<M.Winter (AT) blueyonder (DOT) co.invalid> escreveu:

img ...
onmouseover="if(this.style){this.style.borderColor ='red';}"
onmouseout="if(this.style){this.style.borderColor= '';}"

Thanks, I'm used this in a previous site, but I was looking for another
solution because it's a little heavy, because there as quite a lot of
photos...

I think I'll just forget it, because it doesn't decrease accessibility.
It'll look just nicer in browsers like Opera this time

--

Kerberos.

http://www.opera.com
http://www.freebsd.org
http://www.auriance.com
http://www.osresources.com
http://exodus.jabberstudio.org

/Christoph Paeper/:

*Kerberos* <me (AT) privacy (DOT) net>:

As you might know, IE doesn't support the :hover pseudo-class on
every tag (just the "a" tag AFAIK)
Is there a simple JavaScript that would solve the problem?

Well, there is Dean Edwards's IE7, which features that and more.

http://dean.edwards.name/IE7/

"Dynamic Pseudo-Classes"
<http://dean.edwards.name/IE7/compatibility/super-dynamic.html>

--
Stanimir

Em Tue, 11 Jan 2005 14:40:17 +0200, Stanimir Stamenkov
<s7an10 (AT) netscape (DOT) net> escreveu:

Well, there is Dean Edwards's IE7, which features that and more.

http://dean.edwards.name/IE7/

"Dynamic Pseudo-Classes"
http://dean.edwards.name/IE7/compati...r-dynamic.html

Gosh! This is great! Thank you so much!
If you have other goodies, they're welcome


--

Kerberos.

http://www.opera.com
http://www.freebsd.org
http://www.auriance.com
http://www.osresources.com
http://exodus.jabberstudio.org

On Tue, 11 Jan 2005 10:00:15 -0200, Kerberos <me (AT) privacy (DOT) net> wrote:

[snip]

Thanks, I'm used this in a previous site, but I was looking for another
solution because it's a little heavy, because there as quite a lot of
photos...

function colourBorder() {setBorder(this, '#ff0000');}
function restoreBorder() {setBorder(this, '');}
function setBorder(obj, colour) {
if(obj.style) {obj.style.borderColor = colour;}
}

var featured = null, images;
if(document.getElementById
&& (featured = document.getElementById('featured'))
&& featured.getElementsByTagName)
{
images = featured.getElementsByTagName('img');
for(var i = 0, n = images.length; i < n; ++i) {
images[i].onmouseover = colourBorder;
images[i].onmouseout = restoreBorder;
}
}

Using that would certainly be more efficient than including the IE7
emulation code, particularly if you removed all unnecessary whitespace.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Kerberos wrote:

Em Mon, 10 Jan 2005 23:03:34 GMT, Michael Winter
M.Winter (AT) blueyonder (DOT) co.invalid> escreveu:

img ...
onmouseover="if(this.style){this.style.borderColor ='red';}"
onmouseout="if(this.style){this.style.borderColor= '';}"


Thanks, I'm used this in a previous site, but I was looking for another
solution because it's a little heavy, because there as quite a lot of
photos...

I think I'll just forget it, because it doesn't decrease accessibility.
It'll look just nicer in browsers like Opera this time

I very much liked the look of

http://www.xs4all.nl/~peterned/csshover.html

though I've not yet used it myself. It keeps the IE script in one place
away from most of your own code which doesn't require a lot of heavy
mods inlined. If you use it, note the comment re serving .htc files with
correct mimetype for IE running under XP+SP2.

--
Michael
m r o z a t u k g a t e w a y d o t n e t