473,326 Members | 2,680 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

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
Jul 21 '05 #1
8 6972
On Mon, 10 Jan 2005 16:03:32 -0200, Kerberos <me@privacy.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.
Jul 21 '05 #2
*Kerberos* <me@privacy.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.
Jul 21 '05 #3
Em Mon, 10 Jan 2005 23:03:34 GMT, Michael Winter
<M.******@blueyonder.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
Jul 21 '05 #4
/Christoph Paeper/:
*Kerberos* <me@privacy.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
Jul 21 '05 #5
Em Tue, 11 Jan 2005 14:40:17 +0200, Stanimir Stamenkov
<s7****@netscape.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/compatibility/super-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
Jul 21 '05 #6
Kerberos a écrit :

| 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?

Cleaner than repeating "onmouseover = " code in every element, more
focussed on your problem than IE7, let me point you to the "Suckerfish
Dropdowns" article at http://www.alistapart.com/articles/dropdowns/.

You simply have to adapt the provided JS function (change "nav" to
"featured", obviously) and slighly modify your CSS as follows:

| [...]
| #featured img:hover {

Change this to

#featured img:hover, #featured img.over {

| border: 1px solid #FF0000;
| }

That's what I do. HTH.

--
Daniel Déchelotte
http://yo.dan.free.fr/
Jul 21 '05 #7
On Tue, 11 Jan 2005 10:00:15 -0200, Kerberos <me@privacy.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.
Jul 21 '05 #8
Kerberos wrote:
Em Mon, 10 Jan 2005 23:03:34 GMT, Michael Winter
<M.******@blueyonder.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
Jul 21 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Andrew Thompson | last post by:
I would like to create a menu that uses the 'active' pseudo-class to highlight the current page, but I cannot get it to work. The URL http://www.lensescapes.com/tst/nav/1.jsp shows the attempts...
2
by: Bob P. | last post by:
Hi, basically what I'd like to do is suppress the action that causes the URL to show up in the browser status bar when I roll over a hyperlink. I know I could use the onmouseover event in each...
1
by: Jean Pion | last post by:
Dear readers, Can I have a class selector the pseudoclasses like: .menuw { general_stuff_for_this_class; } a.menuw:link { special_for_link;} a.menuw:visited {special_for_visited; }...
8
by: ZakRhino | last post by:
Is there a way to turn this DHTML code into CSS code? If so what is the correct way it should be put in the code? onmouseover="this.style.backgroundColor='#0061D7';"...
3
by: friday13 | last post by:
Hi, I would like to set the link's "visited" pseudo-class with javascript without clicking on the link. My goal is to update the link's color (previously set in the CSS file) to be "visited"...
1
by: Didd | last post by:
I'm building a real-time layout tool where you can change for ex. font sizes and background colors directly by entering appropriate values into specified fields. I'm using JQuery to target...
1
by: GVDC | last post by:
Example server-side JavaScript Web script, Dictionary class //Dictionary class, hash array unlimited length configurable speed/efficiency // printf("<html><body>"); printf("<b>Creating...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.