Topic awaiting preservation: CSS pseudo-class :hover - workaround for absence in IE $Pages that link to <a href="https://ozoneasylum.com/backlink?for=8842" title="Pages that link to Topic awaiting preservation: CSS pseudo-class :hover - workaround for absence in IE" rel="nofollow" >Topic awaiting preservation: CSS pseudo-class :hover - workaround for absence in IE\$

Author	Thread
smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 09-01-2003 14:43 Hi guys, I have been using CSS a lot recently and have discovered soem cool things, but one thing stopping me from implementing these cool things is that IE only supports the :hover pseudo-class on 'a' objects. So what I want to do is figure out a way to seamlessly implement in IE any references to :hover using the onMouseOver event. But firstly I need a way to check objects to see if a :hover pseudo-class is attached, and if it is and the browser is IE then get the :hover css attributes and apply them using javascript access to teh style properties of objects. I think it can be done without upsetting standard page code too much - but then there may be a huge gaping hole in my understanding of js (in fact I knwo there is). Get thinking people if it ain't too much trouble, Thanks guys, Jon visit my CryoKinesis Online Gallery
Emperor Maniac (V) Mad Scientist with Finglongers From: Cell 53, East Wing Insane since: Jul 2001	posted 09-01-2003 14:53 smonkey: Its not clear what you are attempting. Could you explain further? ___________________ Emps FAQs: Emperor
smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 09-01-2003 20:04 ok imagine this: code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style> .bob { background: blue; width: 100px; height: 100px; } .bob:hover { background: red; } </style> </head> <body> <div class="bob"> yada yada yada </div> </body> </html> Now in Opera and Mozilla and Safari, the blue square div with the class of 'bob' will go red if you mouseover it. But in IE this does not happen because the class of bob is applied to a 'div' object rather than an 'a' link object. So the easy workaround for IE would be to add an 'onMouseOver' event to the 'div' that dynamically changes the the background style attribute to red on mouse over and then an 'onMouseOut' event to change it back to blue on mouse out. But that would mean I would have to go into the html code and add those lines, or define the 'div' and assign the 'onMouseOver' event script in the head of the page. What I want to do is create a script that checks the style attributes of objects in the page, and if it finds an element which has a ':hover' pseudo-class declared for it, then the script would substitute the that :hover event (that doesn't work in IE) with the javascript 'onMouseOver' event that does. This would require a method of checking page objects for css style/class/id properties etc. Can this be done, and are any of you clever enough to figure out how? Thanks guys, Jon [This message has been edited by smonkey (edited 09-01-2003).]
Emperor Maniac (V) Mad Scientist with Finglongers From: Cell 53, East Wing Insane since: Jul 2001	posted 09-01-2003 20:21 smonkey: Ahhhhhh right - gotcha. Why not use A tags? Again I defer to Higher Powers on such matters and direct you to Eric Meyer's examples: www.meyerweb.com/eric/css/edge/popups/demo.html www.meyerweb.com/eric/css/edge/popups/demo2.html Is this new? It doesn't help much but it discusses the same topic: www.meyerweb.com/eric/css/edge/menus/demo.html ___________________ Emps FAQs: Emperor
smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 09-01-2003 22:20 Hi Emps, Yes I have seen those links, I was really keen on the idea of pop-up menus with css only - I particular like this one http://pixy.cz/blogg/clanky/csshiermenu/ but it doesn't work with IE (same as all css pop-up menus) - If you can see a way to add the 'a' tags into that to make it work in IE then you'd be my hero. I was hoping that there might be a javascript solution which would use the javascript ability of reading attributes and look for the :hover bits and replace them (I don't know how plausible any of this is, I have only touched on these things in passing, but it seems it could be possible) The second argument might be something like: why would you want to create a css only menu that needs javascript in the most dominant browser? wouldn't it just be better to use a javascript menu from the start? Well that is true and I have created my own js menu based on the tried and tested 'show/hide' div principles and some css for aesthetics, but it seems so 'unclean' to me - I would rather go the lovely css route and then create a fix for ie that could be removed when M$ finally sort out their browser. This js fix could be stored in a seperate js file that would only be loaded if some 'sniffer' detected the stink of IE. I do actually like IE - I wouldn't care about standards if IE was the only browser, I'd just use whatever M$ gave me to use. But as it stands there are other browsers and these browsers all have different ideas and I'm pissed about it, so I favour the standards over proprietry shite - my current browser of choice being the oh so clean and simple Mozilla Firebird. Thanks again Emps, still keep you thinking cap on tho - I need thoughts from that brain of yours.

Topic awaiting preservation: CSS pseudo-class :hover - workaround for absence in IE\$

Author

Thread

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 09-01-2003 14:43

Hi guys,

I have been using CSS a lot recently and have discovered soem cool things, but one thing stopping me from implementing these cool things is that IE only supports the :hover pseudo-class on 'a' objects.

So what I want to do is figure out a way to seamlessly implement in IE any references to :hover using the onMouseOver event. But firstly I need a way to check objects to see if a :hover pseudo-class is attached, and if it is and the browser is IE then get the :hover css attributes and apply them using javascript access to teh style properties of objects.

I think it can be done without upsetting standard page code too much - but then there may be a huge gaping hole in my understanding of js (in fact I knwo there is).

Get thinking people if it ain't too much trouble,

Thanks guys,

Jon

visit my CryoKinesis Online Gallery

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted 09-01-2003 14:53

smonkey: Its not clear what you are attempting. Could you explain further?

___________________
Emps

FAQs: Emperor

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 09-01-2003 20:04

ok imagine this:

code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<style>

.bob {

        background: blue;

        width: 100px;

        height: 100px;

}

.bob:hover {

        background: red;

}

</style>

</head>

<body>

<div class="bob">

yada yada yada

</div>

</body>

</html>

Now in Opera and Mozilla and Safari, the blue square div with the class of 'bob' will go red if you mouseover it.

But in IE this does not happen because the class of bob is applied to a 'div' object rather than an 'a' link object.

So the easy workaround for IE would be to add an 'onMouseOver' event to the 'div' that dynamically changes the the background style attribute to red on mouse over and then an 'onMouseOut' event to change it back to blue on mouse out.

But that would mean I would have to go into the html code and add those lines, or define the 'div' and assign the 'onMouseOver' event script in the head of the page.

What I want to do is create a script that checks the style attributes of objects in the page, and if it finds an element which has a ':hover' pseudo-class declared for it, then the script would substitute the that :hover event (that doesn't work in IE) with the javascript 'onMouseOver' event that does.

This would require a method of checking page objects for css style/class/id properties etc.

Can this be done, and are any of you clever enough to figure out how?

Thanks guys,

Jon

[This message has been edited by smonkey (edited 09-01-2003).]

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted 09-01-2003 20:21

smonkey: Ahhhhhh right - gotcha. Why not use A tags? Again I defer to Higher Powers on such matters and direct you to Eric Meyer's examples:
www.meyerweb.com/eric/css/edge/popups/demo.html
www.meyerweb.com/eric/css/edge/popups/demo2.html

Is this new? It doesn't help much but it discusses the same topic:
www.meyerweb.com/eric/css/edge/menus/demo.html

___________________
Emps

FAQs: Emperor

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 09-01-2003 22:20

Hi Emps,

Yes I have seen those links, I was really keen on the idea of pop-up menus with css only - I particular like this one http://pixy.cz/blogg/clanky/csshiermenu/ but it doesn't work with IE (same as all css pop-up menus) - If you can see a way to add the 'a' tags into that to make it work in IE then you'd be my hero.

I was hoping that there might be a javascript solution which would use the javascript ability of reading attributes and look for the :hover bits and replace them (I don't know how plausible any of this is, I have only touched on these things in passing, but it seems it could be possible)

The second argument might be something like: why would you want to create a css only menu that needs javascript in the most dominant browser? wouldn't it just be better to use a javascript menu from the start?

Well that is true and I have created my own js menu based on the tried and tested 'show/hide' div principles and some css for aesthetics, but it seems so 'unclean' to me - I would rather go the lovely css route and then create a fix for ie that could be removed when M$ finally sort out their browser. This js fix could be stored in a seperate js file that would only be loaded if some 'sniffer' detected the stink of IE.

I do actually like IE - I wouldn't care about standards if IE was the only browser, I'd just use whatever M$ gave me to use. But as it stands there are other browsers and these browsers all have different ideas and I'm pissed about it, so I favour the standards over proprietry shite - my current browser of choice being the oh so clean and simple Mozilla Firebird.

Thanks again Emps, still keep you thinking cap on tho - I need thoughts from that brain of yours.